QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Styling HTML5 Input Elements

Styling HTML5 Input Elements

html5-input-controls

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

input[type="color"]{}

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="date"]{}
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

input[type="email"]{}

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"]{}

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] {}
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"]{}
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="url"]{}
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.

Nov 6, 2014Narayan Prusty
Intercepting Android Back Button In Intel XDKFacebook Timeline Algorithm
Comments: 2
  1. kirubha
    4 years ago

    Very useful

    ReplyCancel
  2. Thach
    5 years ago

    thanks you. that basic but that’s useful.
    Thanks you so!

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 2 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Styling Color Type
  • Styling Date, Month, Time, Week, Datetime, Datetime-local Type
  • Styling E-Mail Type
  • Styling Number Type
  • Styling Range Type
  • Styling Search Type
  • Styling Telephone and URL Type
  • Conclusion
Related Articles
  • How to take Date Input in HTML
  • WordPress Custom Meta Boxes Tutorial
  • Changing Text Selection Color Using CSS
  • Tabs Using HTML And CSS Only
  • CSS Specificity: Priortizing Selectors Rules
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license