The look of an HTML form can be greatly improved with CSS:
input {
width: 100%;
}
The example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors:
Example
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Note that we have set the box-sizing property to border-box. This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.
Example
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
If you only want a bottom border, use the border-bottom property:
First Name
Example
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
Example
input[type=text] {
background-color: #3CBC8D;
color: white;
}
Example
input[type=text]:focus {
background-color: lightblue;
}
Example
input[type=text]:focus {
border: 3px solid #555;
}
Example
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Example
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Example
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Example
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Example
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|