EN
CSS - input border color change on focus
0
points
In this article, we would like to show you how to change input border-color on focus using CSS.
Quick solution:
input:focus {
border-color: red;
}
Practical example
In this example, we use CSS :focus pseudo class to create a separate style for input that is focused.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
input:focus {
border: 1px solid;
border-color: red; /* changes border color */
border-radius: 3px;
outline: none;
padding: 2px;
margin: 0 1px;
}
</style>
</head>
<body>
<form onsubmit="return false;">
<input type="text" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Note:
This approach affects all types of inputs.