Form Validation Styling Using Selector in CSS 3

Form Validation Styling Using Selector in CSS 3

    In this article, we will see how to apply the validation styles to the HTML form input using Pseudo Classes.

    Before dive into the topic will see about Pseudo Class.  

What is Pseudo Classes ?

    Pseudo Classes help to select and apply the styles for a particular or group of HTML elements.

    Pseudo Class is used to apply the style to the specific element or group of elements.

    Pseudo Class also help to ignore the style to the specific or group of HTML elements.

    We can use the Pseudo class with CSS Classes.

    Pseudo Classes denoted by ( : ) symbol.

    If want learn more about selectors 

         Advance CSS Selector Become Expert in CSS3  

         Most Useful & Advance CSS3 Pseudo Classes  

         CSS Pseudo Elements

         CSS Selectors That Every Developer Must Know

Let's See Form Validation Styling Selecors :

1) :optional Selector

 

    : optional  selector helps to select and apply the styles to the input form element which do not have the required attribute.

 

    Input filed without required attribute consider as optional.

 

    Note: This :optional selector only works with input, select, and textarea.

 

Syntax


:optional {

  css declarations;

}{codeBox}

 

Example : 

HTML

<input required />


<input />{codeBox}

 

CSS

 

input:optional {

  background: yellow;

}{codeBox}


Output

 

:optional Selector - Form Validation Styling Using Selector in CSS 3

 

2) :read-only Selector

 

    : read-only  selector helps to select and apply the styles to the input form element which have the readonly attribute.

 

    Note: This :read-only selector only works with input, select, and textarea.

 

Syntax


:read-only {

  css declarations;

}{codeBox}

 

Example : 

 

HTML


<input readonly />

 

<input />{codeBox}


CSS


input:read-only {

  background: green;

}{codeBox}

 

Output


:read-only Selector - Form Validation Styling Using Selector in CSS 3

3) :read-write Selector

 

    : read-write  selector helps to select and apply the styles to the input form element which do not have the readonly, disabled attribute.

 

    Note: This :read-write selector only works with input, select, and textarea.

 

Syntax


:read-write {

  css declarations;

}{codeBox}

 

Example : 

 

HTML


<input readonly />

 

<input />{codeBox}


CSS


input:read-write {

  background: orange;

}{codeBox}

 

Output

 

:read-write Selector - Form Validation Styling Using Selector in CSS 3

4) :valid Selector

 

    : valid  selector helps to select and apply the styles to the input form element which have valid value.

 

    Note: This :valid selector only works with form elements like input with min, max attribute and type email with valid email and number type with valid value.

 

Syntax


:valid {

  css declarations;

}{codeBox}

 

Example : 

 

HTML


<input type="email" value="support@attractiveaurora.com" />

 

<input type="email" value="www.attractiveaurora.com" />{codeBox}


CSS


input:valid {

  background: lightblue;

}{codeBox}

 

Output

 

:valid Selector - Form Validation Styling Using Selector in CSS 3


5) :invalid Selector

 

    : invalid  selector helps to select and apply the styles to the input form element which have invalid value.

 

    Note: This :invalid selector only works with form elements like input with min, max attribute and type email with invalid value and number type with invalid value.

 

Syntax


:invalid {

  css declarations;

}{codeBox}

 

Example : 

 

HTML


<input type="email" value="support@attractiveaurora.com" />

 

<input type="email" value="www.attractiveaurora.com" />{codeBox}


CSS


input:invalid {

  background: red;

}{codeBox}

 

Output


:invalid Selector - Form Validation Styling Using Selector in CSS 3

6) :in-range Selector

 

    : in-range  selector helps to select and apply the styles to the input element with number type and value should be in in range.

 

    Note: This :in-range selector only works with input element with min, max attribute.


Syntax


:in-range {

  css declarations;

}{codeBox}

 

Example : 

 

HTML


<input type="number" min="1" max="10" value="5" />{codeBox}


CSS


input:in-range {

  border : 2px solid green;

}{codeBox}

 

Output

 

:in-range Selector - Form Validation Styling Using Selector in CSS 3


7) :out-of-range Selector

 

    : out-of-range  selector helps to select and apply the styles to the input element with number type and value should be in out of range.

 

    Note: This :out-of-range selector only works with input element with min, max attribute.


Syntax


:out-of-range {

  css declarations;

}{codeBox}

 

Example : 

 

HTML


<input type="number" min="1" max="10" value="15" />{codeBox}


CSS


input:out-of-range {

  border : 2px solid red;

}{codeBox}

 

Output

:out-of-range Selector - Form Validation Styling Using Selector in CSS 3

 

I think this information is helpful to you.

 

Thanks for reading - Don't Forgot To Share & Comment

Any suggestion or queries please comment, our team will response asps.

 

You may like this

 

         Advance CSS Selector Become Expert in CSS3

         Most Useful & Advance CSS3 Pseudo Classes

         CSS Pseudo Elements

         CSS Selectors That Every Developer Must Know

 

         JavaScript Web API's That Every Developer Should Know

         HTML API's That Every Developer Should Know




1 Comments

Previous Post Next Post