Can't change color of border while focusing on input tag

user_16950756 0
Viewed 69

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>

frontend css html
1 Answers

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>

user_76046620
Related