Change font-style when user starts typing

[chrisburton]

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]

@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.

[chrisburton]

@CrocoDillon Oh, wow. I’m already using those in my stylesheet but I didn’t even think about targeting it specifically. Thank you!

[yoyo]

@srig99 is right, :focus is the way

[chrisburton]

@yoyo Unfortunately not. You have to read the functionality I was looking for. “When the user starts typing”, not on focus.

[howlermiller]

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: https://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]

> I like that idea, Chris. I’d like to see it used in a real site.

@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

[howlermiller]

@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!

[chrisburton]

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.

[Andy Howells]

I assume you don’t want to use JavaScript to solve this? Could do an on change event using JS.

[chrisburton]

@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.

[Author]

Posts