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