Grow your CSS skills. Land your dream job.

active input css styling

  • jmc
    # April 7, 2013 at 3:38 pm

    I wasn’t quite sure how to succinctly ask this, or else I would try to find the answer on google. I hope describing my inquiry here will help.

    I am in the process of building a webpage for a client [(Link)](http://kezele.co/kezele/ “Kezele”). I created an effect with the labels that retract when the cursor hovers, allowing to both identify the field and provide more visual space for anyone filling out the form.

    I have it working on hover, but I am not quite sure how to target the effect to stay when the input is active. this way, it would not require a cursor hover to display the additional space, and the effect can be achieved by tabbing through the individual fields

    hope there is a CSS only solution for this, but I would be open to JS if there is no other way to make this possible.

    jmc
    # April 7, 2013 at 3:43 pm

    If it helps, the tags I am targeting are `

    # April 8, 2013 at 10:20 am

    try using the input:focus pseudo class selector

    jmc
    # April 8, 2013 at 5:09 pm

    sadly that did not seem to work. upon further research I discovered that there is no CSS selector for styling the label on input:active (or so said the site I found this info on)

    I haven’t had any luck finding a js solution yet.

    # April 9, 2013 at 2:12 am

    if you are try to highlight the current form element, [read this post](http://css-tricks.com/improved-current-field-highlighting-in-forms/ “”)

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

You must be logged in to reply to this topic.

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