How to change the input border color using css?
May 25, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, learn how to change the input border color using css?.
Here, the input field gets a red border color when it gets focus (clicked on)
. We have also added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus)
Table of contents
- Includes css in html page
- Include the code in body
This article will guide you to adding change the input border color using css with example.
Step 1: Includes css in html page
Here we are using, to make input box margin, padding, box-sizing, outline etc.
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid rgb(207, 19, 19);
}
Step 2: Include the code in body
Include the code below in <body>
to accept .label
.input
.
<div class="container">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="Himanshu">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Mishra">
</form>
</div>
Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid rgb(207, 19, 19);
}
</style>
</head>
<body>
<div class="container">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="Himanshu">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Mishra">
</form>
</div>
</body>
</html>
Check the output of the above code example.
All the best 👍