i am trying to change the border color of my input while focus but it's not change.
.input_container {
width: 100%;
height: 35px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.input_bar {
width:90%;
height: 80%;
font-size: 18px;
padding: 15px;
/* top right bottom left*/
border-radius: 5px;
border: solid 1px rgb(206,212,218);
}
.input_bar:focus {
border: 1px solid rgb(0, 255, 255);
}
<div class="input_container">
<input class="input_bar" type="text" placeholder="title" />
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Add outline: none
in input_bar
class
Check below-working answer
.input_container{
width: 100%;
height: 35px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.input_bar{
width:90%;
height: 80%;
font-size: 18px;
padding: 15px;
/* top right bottom left*/
border-radius: 5px;
outline: none;
border: solid 1px rgb(206,212,218);
}
.input_bar:focus{
border: 1px solid rgb(0, 255, 255);
}
<div class="input_container">
<input class="input_bar" type="text" placeholder="title" />
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>