Give help. Get help.

  • # 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: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 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:

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

    # 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="" /]

    # 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 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.