CSS can be used to style the labels, fields, buttons, checkboxes, etc. in an HTML form.
Below is the construction of a very simple form.
<form action="forms/processing.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="reviews">Review of 1SMARTchicken:</label>
<textarea name="reviews" rows="5" cols="50"></textarea>
<input type="submit" value="Submit">
</form>
Using CSS, each element of the form can be styled. For instance, in the example below we wrap the entire form in a thin border, make sure that each input falls on its own line by making the width 100%, we are giving each input a set padding and margin, applies a border and border radius, and styles the submit button.
It also changes the border color of an input and textarea when the user clicks into them.
form {
padding: 8px;
border: #eaeaea solid thin;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px 8px;
margin: 8px;
display: inline-block;
border: #bababa solid thin;
border-radius: 4px;
}
textarea {
width: 100%;
height: 80px;
border: #bababa solid thin;
}
input:focus, textarea:focus {
border-color: blue;
}
input[type="submit"] {
background-color: #ff0000;
border: none;
color: white;
padding: 8px 26px;
text-decoration: none;
cursor: pointer;
}
This is just an example of a few of the elements that can be styled and a few of the properties typically applied.
Any element in a form, including the form element itself can be styled to give the form an appealing look and to make it easier to use.
Selectors to Style Form Elements
For the most part, to style the form elements, you just target the various tags used to make up the form (form, label, input, textarea, select, option, etc.). But the following selectors can be added to style a form element based on the state of the element or things like whether its required, disabled, checked, etc.
- CSS – :checked Selector
- CSS – :default Selector
- CSS – :disabled Selector
- CSS – :enabled Selector
- CSS – :focus Selector
- CSS – :in-range Selector
- CSS – :indeterminate Selector
- CSS – :invalid Selector
- CSS – :optional Selector
- CSS – :out-of-range Selector
- CSS – ::placeholder Selector
- CSS – :read-only Selector
- CSS – :read-write Selector
- CSS – :required Selector
- CSS – :valid Selector
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
