W3.CSSLesson 40Free preview

W3.CSS Inputs

This lesson is part of W3.CSS · All levels

Summary

W3.CSS provides a class to embellish form elements such as text input, textarea, select, and buttons. Simply add .w3-input to <input> or <textarea> to make it consistent with other components. Several variants are available, such as the bottom line only or the full border, plus the class .w3-block for full width.

Key points

Provides full border and standard padding on the filling column
.w3-input-underline only displays the bottom line as the boundary of the column
Combine with .w3-block to fill or button the width of the container
Use .w3-select on <select> and .w3-btn on the submit button
Always provide <label> that is connected via the for/id attribute

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.