html - How to stylize border of require input box when it alerts -

html - How to stylize border of require input box when it alerts -

see image below:

i want stylize reddish box-shadow , illustration alter color of it.

edit: when utilize code this:

<input type="text" name="example" required>

if user click on submit button without completing required box, alerts! wanna alter default shadow color.

input:invalid { box-shadow:0 0 0px #f00; }

will override shadow.

note, however, styles entered here style required boxes before form has been submitted. such, suspect may need run javascript on submit adds class form, styles appear post-submit. example, create submitting form adds class called "submittedform" form , add together styles.

.submittedform input:invalid { box-shadow:0 0 0px #f00; }

(there may html5 way of doing this, don't think there is)

html css html5 css3