Form - CSS / Required attribute active style

Question

I have a form on a website with input with the required attribute.

When the required attribute is actived on Firefox (when user do't fill correcty the form), there is a kind of red border on my input.

I would like to know how can I change that ? I can I manipulate the style of the required effect when it is activated ?

Thanks for you answers !

you can use the inline code editor from stackoverflow or use https://jsfiddle.net/ — fehrlich, Jul 14 '16 at 13:13

Sankar · Answer 1 · 2016-07-14T13:19:45.430

0

You can control it by :valid and :invalid Pseudo class.

 input:valid {
      border: 1px solid green;
      outline: none;
    }
    
    input:invalid {
      border: 1px solid red;
      outline: none;
    }

<input type="text" required />

edited Jul 14 '16 at 13:19

answered Jul 14 '16 at 13:14

Sankar

6,908
2
30
53

Check [caniuse](http://caniuse.com/#feat=form-validation) for browser compatibility – RDardelet Jul 14 '16 at 13:30

score 0 · Answer 2 · answered Jul 14 '16 at 13:14

0

You use two pseudo-selectors in combination: :required:invalid and :required:valid

For example:

input[type=text]:required:invalid { border-color: red; }

answered Jul 14 '16 at 13:14

Robert

6,881
1
21
26

Form - CSS / Required attribute active style

2 Answers2