Override "user agent stylesheet" on focus

user_10625148 0
Viewed 6369

I have read many posts and tried quite many things but I don't seem to get an embed form to work the way I need it to work.

Problem with input on focus:

1. Blue outline > I tried the code below I seemed to work and then suddenly it stopped working.

input:-webkit-autofill:focus {
    outline: none !important;
}

2. Yellow background > I got it fixed with the code below.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #ffefef inset !important;
}

I would like the form to always look like this (normal, hover, focus, active

But that's sadly not the case because of "user agent stylesheet".

You can see the form in live here →

Also note, I am not a programmer. I know WordPress well enough but any tricky answers might get me confused. I would like to solve this problem either using .css or adding some JavaScript code in the header/footer element.

And I also tried Normalize.css which, I guess, I could just add to my theme folder with the same name... forgive my dummyness. If so, that didn't help. Well, I don't know if I was supposed to add a new line there or not.

Any help would be highly appreciated (praying hands).

css
3 Answers
#drip-first-name:focus, #drip-email:focus {
    outline: 0;
    border-bottom: 3px solid black !important;
}

make sure you prefix it for different browsers(Not sure if needed) and of course do the same for active etc (wherever you get that blue outline) . This will work for chrome.

However, a few notes. since you're messing with css you need to start using Chrome Devtools. It's free and built into chrome. This will show you what's wrong and how to fix it.

Secondly, using !important in css is not a major no no but the reason your border-bottom rule wasn't working was because you had already used !important in a previous class and it was picking it up. Important won't let you override anything unless it's lower in the CSS stylesheet and is also marked as important. Long story short at some point you will have to redo the whole thing if you keep using important.

this is how it would look to you with devtools open:

enter image description here

This is the link for you to get started with devtools: Devtools

user_66775080

apply outline:0 to the input normal style not :hover or focus, then remove border-width: inherit !important; from the :focus of the input, because then it takes it's parent border width, and that is 0px therefore your border disappears on focus.

user_71483910

Well if you'd like you can remove all the default userAgent-styling by using the all: unset; ? That works for me.

But if you just want to remove the outline you shall do input { outline: none; }. Hope that helps.

Edit: the all: unset is there for remove all user Agent Stylesheet. Nothing else.

user_100873970
Related