React-autosuggest: How to style a placeholder?
As per the example I can see that we can specify a string as placeholder in input props. What if I want to style my placeholder where I need provide a different font size, colour or add some icons to it? Any idea? It should look like this http://jsfiddle.net/ADjTF/
psk11
>All comments
hey :)
for the icon. you could use the before pseudo-element of the input field or the label of your input and set the icon as your background image. as soon as you reach the :focus state of your input field you can hide it again. some position magic of the pseudo element and a padding to your input and then you have an icon "inside" your input field thats acting like a placeholder.
the placeholder text itself you can style via a prefixed selector. readon here: https://css-tricks.com/almanac/selectors/p/placeholder/
lovely greetings
Lelith
Lelith
on 15 Nov 2017
Related issues
SMaverick78
路
10Comments
osala-netquest
路
9Comments
diegohaz
路
14Comments
JamieDixon
路
10Comments
kromit
路
12Comments
Most helpful comment
hey :)
for the icon. you could use the before pseudo-element of the input field or the label of your input and set the icon as your background image. as soon as you reach the :focus state of your input field you can hide it again. some position magic of the pseudo element and a padding to your input and then you have an icon "inside" your input field thats acting like a placeholder.
the placeholder text itself you can style via a prefixed selector. readon here: https://css-tricks.com/almanac/selectors/p/placeholder/
lovely greetings
Lelith