CODEWITHSUNDEEP
htmlcss
AmirHussein
AmirHussein

Reputation: 96

How to stylize border of require input box when it alerts

See the picture below:

enter image description here

I want to stylize the red box-shadow and for example change the color of it.

EDIT: When we use a code like this:

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

if user click on submit button without completing the required box, it alerts! I wanna change default shadow color.

Upvotes: 0

Views: 142

Answers (2)

RichardB
RichardB

Reputation: 2767

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

will override the shadow.

Note, however, that styles entered here will style any required boxes before the form has been submitted. As such, I suspect you may need to run a javascript on submit which adds a class to the form, so that the styles only appear post-submit. For example, make it so that submitting the form adds a class called "submittedform" to the form and then add the styles.

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

(There may be a html5 way of doing this, but I don't think there is)

Upvotes: 2

potashin
potashin

Reputation: 44581

You should use box-shadow CSS property for this :

input { box-shadow: 0 0 10px red; }

JSFiddle

Upvotes: 3

Related Questions