HTML5 introduced several new input type for forms. These input types allow to take more types of input data. In this tutorial I will show you the CSS selectors for styling HTML5 input elements.
Styling Color Type
The color type is used for taking a color code as input.
This type can be styled using this CSS selector
Styling Date, Month, Time, Week, Datetime, Datetime-local Type
These types are used for taking a date and/or time as input.
These types can be styled using the following CSS selectors.
input[type="month"]{}
input[type="time"]{}
input[type="week"]{}
input[type="datetime"]{}
input[type="datetime-local"]{}
input::-webkit-datetime-edit{}
input::-webkit-datetime-edit-fields-wrapper{}
input::-webkit-datetime-edit-ampm-field{}
input::-webkit-datetime-edit-day-field{}
input::-webkit-datetime-edit-hour-field{}
input::-webkit-datetime-edit-millisecond-field{}
input::-webkit-datetime-edit-minute-field{}
input::-webkit-datetime-edit-month-field{}
input::-webkit-datetime-edit-second-field{}
input::-webkit-datetime-edit-week-field{}
input::-webkit-datetime-edit-year-field{}
input::-webkit-datetime-edit-ampm-field:focus{}
input::-webkit-datetime-edit-day-field:focus{}
input::-webkit-datetime-edit-hour-field:focus{}
input::-webkit-datetime-edit-millisecond-field:focus{}
input::-webkit-datetime-edit-minute-field:focus{}
input::-webkit-datetime-edit-month-field:focus{}
input::-webkit-datetime-edit-second-field:focus{}
input::-webkit-datetime-edit-week-field:focus{}
input::-webkit-datetime-edit-year-field:focus{}
input::-webkit-datetime-edit-year-field[disabled]{}
input::-webkit-datetime-edit-month-field[disabled]{}
input::-webkit-datetime-edit-week-field[disabled]{}
input::-webkit-datetime-edit-day-field[disabled]{}
input::-webkit-datetime-edit-ampm-field[disabled]{}
input::-webkit-datetime-edit-hour-field[disabled]{}
input::-webkit-datetime-edit-millisecond-field[disabled]{}
input::-webkit-datetime-edit-minute-field[disabled]{}
input::-webkit-datetime-edit-second-field[disabled]{}
input::-webkit-datetime-edit-text{}
input::-webkit-inner-spin-button{}
input::-webkit-calendar-picker-indicator{}
input::-webkit-calendar-picker-indicator:hover{}
Here I have used -wekkit- prefix but to make it cross browser you need to write for -moz-, -ms- and -o- prefixes. And also for most of the above CSS selectors I have used only “input” but change them to “input[type=”]” during use so that you only style these fields not all the HTML5 input fields.
Styling E-Mail Type
The email type is used when we need email address as input. It can be used to validate email while submitting forms.
CSS for styling email type
Styling Number Type
The number type is used for input fields that should contain a numeric value. You can set range restrictions on the number.
CSS for styling number type
input[type="number"]::-webkit-inner-spin-button{}
input[type="number"]::-webkit-outer-spin-button{}
Here I have used -wekkit- prefix but to make it cross browser you need to write for -moz-, -ms- and -o- prefixes.
Styling Range Type
The range type is used for input fields that should contain a value within a range.
CSS for styling range type
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {}
input[type=range]::-webkit-slider-thumb {}
input[type=range]:focus::-webkit-slider-runnable-track {}
input[type=range]::-moz-range-track {}
input[type=range]::-moz-range-thumb {}
input[type=range]::-ms-track {}
input[type=range]::-ms-fill-lower {}
input[type=range]::-ms-fill-upper {}
input[type=range]::-ms-thumb {}
input[type=range]:focus::-ms-fill-lower {}
input[type=range]:focus::-ms-fill-upper {}
Styling Search Type
The search type is used for search fields.
CSS for styling search type
input[type="search"]::-webkit-search-cancel-button{}
Here I have used -wekkit- prefix but to make it cross browser you need to write for -moz-, -ms- and -o- prefixes.
Styling Telephone and URL Type
These fields behave like normal text fields in desktop browsers but in mobile phone they display different keyboard while entering data into these fields.
CSS for styling these fields
input[type="tel"]{}
Conclusion
All the selectors I showed works properly on webkit browsers. IE, Firefox etc are still implementing these styles. Therefore just include the vendor prefix so that when they start supporting the css your website will have the changes automatically.
