I can't change border color when the input field is active. I tried using input:active, input:focus. What I want is the color of input's border to change when user clicks on it.
The CSS code :
input {
margin-top: 20px;
border-radius: 0px;
background-color: #FFFFFF;
border: 1px solid black;
height: 33px;
width: 200px;
&:active {
font-size: 13px;
border: 2px solid Red;
background-color: #ffffff;
}
&:disabled {
border: 1px #Black;
border-radius: 0px;
background-color: #F9FAFB;
}
HTML Code:
<div class="container">
<form>
<label for="input-field">Text</label>
<input type="text" placeholder="...">
<button>..</button>
</form>
</div>
CodePudding user response:
So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;
. Also #black
isn't a valid colour.
Example in scss:
input {
margin-top: 20px;
border-radius: 0px;
background-color: #FFFFFF;
border: 1px solid black;
height: 33px;
width: 200px;
&:active, &:focus { // I think you said you wanted focus as well
font-size: 13px;
border: 2px solid red;
outline: none; // add this
background-color: #ffffff;
}
&:disabled {
border: 1px solid black; // update this
border-radius: 0px;
background-color: #F9FAFB;
}
}
In css:
input:active, input:focus { // I think you said you wanted focus as well
font-size: 13px;
border: 2px solid red;
outline: none; // add this
background-color: #ffffff;
}
- You can't use the
&
in regular css. #Black
isn't a css colour value.- You need
outline: none
to override the browser's default focus behaviour.