Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS active input css styling

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43943
    jmc
    Participant

    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.

    #130934
    jmc
    Participant

    If it helps, the tags I am targeting are `

    #131021
    wolfcry911
    Participant

    try using the input:focus pseudo class selector

    #131053
    jmc
    Participant

    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.

    #131090
    yoyo
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.