CSS Hover

  • Resolved claremc

    (@claremc)


    6 years, 8 months ago

    Hi there, I need help with my custom css. I’ve completed most of it, however I can’t find out how to customize the hover state for the fields. When the user clicks in the NAME and EMAIL field to add their details the whole cell is highlighted on hover with a grey border. I don’t want this to appear. Ideally I would like it to stay the same and remove the hover on the cells.
    Thanks
    Clare

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Freddie

    (@fmixell)

    6 years, 8 months ago

    @claremc,

    The input borders are actually used for accessibility for people with disabilities so they’re able to tab through a page and use forms. If you do wish to remove it this is possible through css.

    This will remove all the outlines from inputs. This is actually on focus that’s probably why you weren’t able to target it with your css. Anytime something is clicked you would always look at the :focus selector.

    input:focus {
    outline: none;
}

    This would remove the outline from all the inputs on your site.

    Cheers,
    Freddie

    Thread Starter claremc

    (@claremc)

    6 years, 8 months ago

    Brilliant thanks, that works.

    Do you know how to change the color of the placeholder text?
    I tried this, but it didn’t work:
    #yikes-mailchimp-container-2 input[type=”text”] {
    color: #012EFE;
    }

    Plugin Contributor Tracy Levesque

    (@liljimmi)

    🏳️‍🌈 YIKES, Inc. Co-Owner

    6 years, 7 months ago

    Hi @claremc

    You will need to use the plceholder pseudo-element.

    Here is more information on that:
    https://css-tricks.com/almanac/selectors/p/placeholder/

    Thank you!
    -Tracy

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Hover’ is closed to new replies.

Tags