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 👍
