CSS Forms

Input Field Width

The width of an input field can be given by CSS width property. It can be given in pixels or in percent value also.

Look at the example below in try-it editor and make some changes in percentage values to see the effects:


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form Width </title>
<meta charset="UTF-8">
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">First Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>

Output

CSS Form Width

Input Field Padding

The padding of an input field creates space between the content and the borders. It can be given by CSS padding property. It's value also can be given in pixels or in percent.

Look at the example below in try-it editor and make some changes in percentage values to see the effects:


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form Padding </title>
<meta charset="UTF-8">
<style>
input[type=text] {
width: 100%;
padding: 10px 15px;
margin: 8px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>

Output

CSS Form Padding

Input Field Border Color

The CSS border property is used to give the border and the color of the input field. In the example below, the border-radius property is used which creates curves at the vertices of the input field. The syntax of giving border color: border:width style color;. Observe the example below and understand the syntax:


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form Padding </title>
<meta charset="UTF-8">
<style>
input[type=text] {
width: 100%;
padding: 10px 15px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>

Output

CSS Form Padding

Input Field Background Color

The background-color property is used to add background color to the input.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form background color </title>
<meta charset="UTF-8">
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid red;
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Snow">
</form>
</body>
</html>

Output

CSS Form background color

Focused Inputs

The :focus selector is used to change the CSS of the input field when it gets focus. Observe below how internal CSS is defined for it.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form Focus </title>
<meta charset="UTF-8">
<style>
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid blue;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" value="Snow">
</form>
</body>
</html>

Output

CSS Form Focus











Follow Us: