Cannot make input:focus overwrite default setting-CodePudding

I am trying to make a CSS style for a form using a border-bottom style that goes to a green box. However I see that the input:focus syntax does not work, and it shows the default focus style. Can anyone tell me how to overwrite the default focus style? Thank you.

<style>
.input1{
    border:0px;
    border-bottom:1px solid #999999;
}
.input1:focus{
    border:1px solid green;
}
</style>

<form action="">
<div>
  <input  type="text" id="texto" >
</div>
</form>

CodePudding user response：

Actually it works, you are missing outline: none;

<style>
.input1{
    border:0px;
    border-bottom:1px solid #999999;
}
.input1:focus{
    border:1px solid green;
    outline: none;
}
</style>

<form action="">
<div>
  <input  type="text" id="texto" >
</div>
</form>