CSS can significantly enhance the appearance of an HTML form.
Employ the width property to specify the width of the input field.
Example
|
input { |
The provided example pertains to all <input> elements. To style specific input types exclusively, attribute selectors can be utilized:
Utilize the padding property to insert space within the text field.
Tip: When dealing with multiple inputs placed sequentially, consider adding margin to provide additional space around them.
First Name
Last Name
Example
| input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; } |
|
Please note that we’ve configured the box-sizing property to border-box. This ensures that padding and borders are incorporated into the total width and height of the elements. For further insights into the box-sizing property, refer to our CSS Box Sizing chapter. |
Bordered Inputs
Utilize the border property to adjust the border size and color, and employ the border-radius property to introduce rounded corners.
First Name
|
|
Example
|
input[type=text] { |
To exclusively apply a bottom border, utilize the border-bottom property.
First Name
|
|
Example
| input[type=text] { border: none; border-bottom: 2px solid black; } |
Employ the background-color property to incorporate a background color into the input, and utilize the color property to adjust the text color.
| ZEUS |
Example
| input[type=text] { background-color: #3CBC8D; color: white; } |
By default, certain browsers may add a blue outline around the input when it receives focus (is clicked on). You can eliminate this behavior by appending outline: none; to the input.
Leverage the :focus selector to apply styling to the input field when it receives focus:
To include an icon within the input, utilize the background-image property and adjust its position using the background-position property. Additionally, note that we incorporate a significant left padding to allocate space for the icon.
Example
|
input[type=text] { |
In this example, we employ the CSS transition property to animate the width of the search input upon receiving focus. Further insights into the transition property will be covered later in our CSS Transitions chapter.
Example
| input[type=text] { transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } |
Tip: Utilize the resize property to inhibit resizing of textareas, thereby disabling the “grabber” in the bottom right corner.
Example
|
textarea { |
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] { |
Resize the browser window to observe the outcome. If the screen width falls below 600px, reconfigure the layout to stack the two columns vertically instead of horizontally.
