I'm trying to remove the borders from input
when it 's focused or active, but it doesn't work in any way. I'm using bootstrap and sass, but it doesn't work either way. Here I show what I want.
I want to remove the yellow-red-green border that appears there when you click to write
<div class="row">
<div class="form-group mx-auto">
<input type="email" class="form-control-lg border-0" placeholder="Correo Electronico">
</div>
</div>
styles
.form-control-lg {
background: $main-color-l;
border-bottom: 2px solid $shadow-green !important;
color: white;
margin-top: 10px;
&:focus {
border: none;
}
&:active {
border: none;
}
}
Unless you have bootstrap styles after which you want to apply custom; namely:
The order of your CSS codes should be like this:
Now with CSS you would have an input like this:
Later with CSS we modify its appearance in this way:
:focus
-class to identify when the text box has been clicked and is available for writingoutline: none;
we remove the default border that is placed when we put the mouse cursorborder: 1px solid red;
are just putting a different color that makes the change noticeablefull example