Input:focus doesn't work on wordpress theme's subscribe form-CodePudding

I'm trying to build a subscribe form on wordpress theme. The inputs only have border-bottom, which I have styled in css. However, when I try to repeat the same operation for input:focus, the border remains unchanged. How do I resolve this problem?

footer input:focus {
  border: none;
  border-bottom: 0.1vmin solid honeydew;
}

CodePudding user response：

When everything else fails you can always play it dirty with

!important

footer input{
border-bottom:2px solid red!important;
}
footer input{
border-bottom:2px solid #000;
}
footer input.test{
border-bottom:2px solid blue;
}

<footer>
<input  type="text">
</footer>

Tags marked by important overrule pretty much everything else.

CodePudding user response：

First, when you are checking in the devtools, make sure you actually have the input focused, otherwise the :focus style rules won't show in the devtools list. Then scroll down the list and check if your css rule is anywhere in the list (it may be lower down if it is overriden). If it isn't, check that you are using the correct css selector. If the selector is definitely correct, you probably aren't loading the styles correctly.