Grow your CSS skills. Land your dream job.

Change font-style when user starts typing

  • # February 19, 2013 at 9:14 pm

    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?

    # February 19, 2013 at 9:38 pm

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

    # February 19, 2013 at 9:56 pm

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

    # February 20, 2013 at 5:20 am

    I came across this today, not very good browser compatibility but at least it’s something:

    input {
    font-style: normal;
    }
    ::-webkit-input-placeholder {
    font-style: italic;
    }
    :-moz-placeholder {
    font-style: italic;
    }

    # February 20, 2013 at 6:21 am

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

    # February 20, 2013 at 6:34 am

    @srig99 is right, :focus is the way

    # February 20, 2013 at 7:29 am

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

    # February 20, 2013 at 9:26 am

    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.

    # February 20, 2013 at 10:23 am

    @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 `:before` does? ), Opera prefix seems missing.

    # February 20, 2013 at 10:33 am

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

    [video src="http://f.cl.ly/items/0N0h0Z141z340y131G0d/search-font-styles.mp4" /]

    # February 20, 2013 at 10:51 am

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

    # February 20, 2013 at 11:02 am

    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.

    # February 20, 2013 at 11:15 am

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

    # February 20, 2013 at 11:17 am

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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".