Webstudio
Log in

Join the Webstudio community

Updated 2 months ago

How to put an icon in a "text input" component like in the image.

At a glance

The community member tried to make an icon "float" above a "text input" component, but clicking the icon did not select the input component. The comments suggest two solutions: 1) adding pointer-events: none to the icon, and 2) adding left padding to the input to make the text start after the icon. There is no explicitly marked answer in the comments.

᲼᲼Amin
·
I tried to let the icon "float" above the "text input" component, but if you than click the icon it will not select the "text input" component.
Attachment
image.png
B
᲼
4 comments
BBogdan
Add pointer-events: none to icon
᲼᲼Amin
Do you know how I can let start the text after the icon, because if you now select the inputbox, it will start write from underneath the icon?
BBogdan
Add left padding to input
᲼᲼Amin
Thank you
Add a reply
Sign up and join the conversation on Discord