Is it possible to change the border color of an input field when clicked using CSS? I attempted to use the pseudo-class focus for this purpose, but encountered some issues. It seems to only work on select elements and not on elements like text inputs.
.input-field {
height: 3em;
width: 80%;
padding: .3rem 2rem;
font-size: 14px;
font-weight: 700;
border: 1px solid var(--input-field-color);
border-radius: 5px;
}
.input-group-append {
margin-left: -40px !important;
}
.input-group-text {
background: transparent !important;
border: 0px !important;
}
.signUpButton {
height: 3em;
width: 80%;
border-radius: 50px;
outline: none;
background: linear-gradient(90deg, #EC008C 0%, #FC6767 100%);
border: 0;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.input-field:focus {
border-color: var(--input-field-focus-color) !important;
transition: border-color .20s ease-in;
}
.input-field:active {
border-color: var(--input-field-focus-color) !important;
transition: border-color .20s ease-in;
}<form>
<div class="form-header">
<input type="text" class="input-field" placeholder="john">
</div>
<div class="form-header">
<input type="text" class="input-field" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e2e1e0c3e6fbe2eef3efe6ade0ecee">[email protected]</a>">
</div>
<div class="form-header">
<select class="input-field" name="gender">
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
</div>
<div class="form-header">
<select name="country" class="input-field">
<option> India </option>
</select>
</div>
<div class="form-header">
<div class="input-group">
<input type="password" class="input-field" placeholder="#########" />
<div class="input-group-append">
<span class="input-group-text"> <i class="fas fa-lock"> </i> </span>
</div>
</div>
</div>
<div class="form-header">
<input type="submit" class="signUpButton" name="submit" />
</div>
</form>