How to change the input border color using css?

Hi 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.

Bootstrap, Input, Border

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Stay tuned working on React Js Cheat Sheets Book

Related Posts