Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #254672

    I want to make any form fields that are clicked in have a background/highlight color. I know I can use “:focus” but not sure where to put it. I’d like to cover ALL fields at one time if possible.

    For testing only text fields, I used:

    #top input[type="text"]:focus {
    background-color: #51CBEE !important;
    }

    but, for example, not sure what the difference is in “#top .input-text” and “#top input[type="text"]“

    #254676

    Hmmm, this seems to work but could I be missing anything?

    #top input[type="text"]:focus,
    #top input[type="email"]:focus,
    #top input[type="tel"]:focus,
    #top input[type="number"]:focus,
    #top textarea:focus,
    #top select:focus {
    background-color: #FFFA99 !important;
    }

    #254899

    Hi!

    Thank you for visiting the support forum.

    Did it work for you? You can use this if you want:

    #top input[type="text"]:focus, #top input[type="password"]:focus, #top input[type="email"]:focus, #top input[type="number"]:focus, #top input[type="url"]:focus, #top input[type="tel"]:focus, #top input[type="search"]:focus, #top textarea:focus {
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
    color: #555;
    background-color: #FFFA99 !important;
    }

    Regards,
    Ismael

    #255202

    Yes it worked. Thanks!

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

The topic ‘Form fields, change color on Focus’ is closed to new replies.