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

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

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.

Related Posts