W3.CSS Input
W3.CSS Form Controls
The w3-input class styles text fields, email fields, textareas, and other form controls.
W3.CSS also has classes for checkboxes, radio buttons, and select menus.
Basic Input
Use the w3-input class to style an input field.
Example
<form class="w3-container">
</p>
<p>
<label>Name</label>
<input class="w3-input" type="text">
</p>
<p>
<label>Email</label>
<input class="w3-input" type="email">
</p>
<p>
<label>Message</label>
<textarea class="w3-input"></textarea>
</p>
</form>
Input Borders
Add the w3-border class to create a full border around an input.
Labels
Labels can be placed above or below an input field.
Top Labels
Bottom Labels
Checkboxes
Use the w3-check class to style checkboxes.
Example
<input class="w3-check" type="checkbox" checked>
<label>Milk</label>
<input class="w3-check" type="checkbox">
<label>Sugar</label>
Radio Buttons
Use the w3-radio class to style radio buttons.
Example
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio" type="radio" name="gender" value="female">
<label>Female</label>
Select Menues
Use the w3-select class to style a select menu.
Example
<select class="w3-select" name="option">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Add w3-border for a bordered select menu:
Form Elements in a Grid
Use w3-grid to place form controls next to each other.
The columns automatically stack when there is not enough space.
Example
<div class="w3-grid"
style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px">
<input class="w3-input w3-border" type="text" placeholder="One">
<input class="w3-input w3-border" type="text" placeholder="Two">
<input class="w3-input w3-border" type="text" placeholder="Three">
</div>
Grid with Labels
Example
<div class="w3-grid"
style="grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px">
<div>
<label>First Name</label>
<input class="w3-input w3-border" type="text">
</div>
<div>
<label>Last Name</label>
<input class="w3-input w3-border" type="text">
</div>
</div>
Resize the screen to see the effect.
Form Elements in a Row
In this example, we use the w3-row class (Responsive Row) to make
the inputs appear on the same line.
On smaller screens, they will stack horizontally with 100% width.
Example
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>
Try It Yourself »
What You Have Learned
- Use
w3-inputfor form controls - Use
w3-borderfor bordered inputs - Use
w3-checkfor checkboxes - Use
w3-radiofor radio buttons - Use
w3-selectfor select menus - Use
w3-gridto create responsive form layouts
More Examples
The following examples show additional ways to style form controls:
Colors
Feel free to use your favorite styles and colors:
Input Form
Example
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form>
Try It Yourself »
Icon Labels
Combine icons and form controls.
Two Inputs in a Row
In this example, we use the w3-row class (Responsive Row) to make
the inputs appear on the same line.
On smaller screens, they will stack horizontally with 100% width.
Example
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div>
Try It Yourself »
Rounded Input
Border classes can be combined with round classes:
Example
<input class="w3-input w3-border w3-round" type="text">
<input class="w3-input w3-border w3-round-large" type="text">
Animated Inputs
The w3-animate-input class animates the width of an input to 100%.
