@chrisburton I think this gets it done: http://codepen.io/srig99/pen/xoyuz. Is that what you wanted? Or did you want to change the font-style only when there is text inside the input box?
@srig99 Yeah, that's what I was doing too. I prefer when there is text inside the input from the user. If it's not possible with CSS, I'd rather not do it.
@howlermiller The CanIUse link is about support for the attribute, not styling it. Good find on the prefixes I missed though (though I assume the single colon works for FF19+ too, like :before does? ), Opera prefix seems missing.
@CrocoDillon Oh, you're right. That's my bad. Here's the link I should have posted: Styling the HTML5 placeholder. That article has a nice little graph showing exactly what you can use where. Looks like font-style doesn't work in Opera, Safari 3.1, or IE<10. But breakage wouldn't be a huge deal here, either.
And actually, I don't think the single colon does work in FF19+. I just tested it in 21, and it certainly doesn't work here, but the double colon does. Weirdness.
@chrisburton Wow. That's really nice. I like that a lot. Great work!
@AndyHowells Correct. At this point I'm not looking to add any further functionality via jQuery or Javascript. I want to keep the site as fast as possible with little lagging as possible.
Is it possible to change from italic to normal when a user is typing in an input?
For example, my placeholder text is "Search..." but I would prefer that once the user starts typing, the font-style switches to normal.
Possible with CSS?
@chrisburton I think this gets it done: http://codepen.io/srig99/pen/xoyuz. Is that what you wanted? Or did you want to change the
font-styleonly when there is text inside theinputbox?@srig99 Yeah, that's what I was doing too. I prefer when there is text inside the input from the user. If it's not possible with CSS, I'd rather not do it.
I came across this today, not very good browser compatibility but at least it's something:
@CrocoDillon Oh, wow. I'm already using those in my stylesheet but I didn't even think about targeting it specifically. Thank you!
@srig99 is right,
:focusis the way@yoyo Unfortunately not. You have to read the functionality I was looking for. "When the user starts typing", not on focus.
As far as styling the placeholder goes, if you use all of the different prefixes then browser compatibility is pretty good: CanIUse
Here's an article on the four different prefixes: http://css-tricks.com/snippets/css/style-placeholder-text/
I like that idea, Chris. I'd like to see it used in a real site.
@chrisburton no problem :)
@howlermiller The CanIUse link is about support for the attribute, not styling it. Good find on the prefixes I missed though (though I assume the single colon works for FF19+ too, like
:beforedoes? ), Opera prefix seems missing.@howlermiller This is what I'm doing (use Firefox to play, Chrome is giving me a bug). http://f.cl.ly/items/0N0h0Z141z340y131G0d/search-font-styles.mp4
@CrocoDillon Oh, you're right. That's my bad. Here's the link I should have posted: Styling the HTML5 placeholder. That article has a nice little graph showing exactly what you can use where. Looks like
font-styledoesn't work in Opera, Safari 3.1, or IE<10. But breakage wouldn't be a huge deal here, either.And actually, I don't think the single colon does work in FF19+. I just tested it in 21, and it certainly doesn't work here, but the double colon does. Weirdness.
@chrisburton Wow. That's really nice. I like that a lot. Great work!
I'm using both single and double colons to be safe along with an -ms- prefix. As stated aobe, I agree, I'm not too worried about it breaking.
I assume you don't want to use JavaScript to solve this? Could do an on change event using JS.
@AndyHowells Correct. At this point I'm not looking to add any further functionality via jQuery or Javascript. I want to keep the site as fast as possible with little lagging as possible.