CODEWITHSUNDEEP
htmlcssfirefoxfirebug
sam
sam

Reputation: 1087

Cannot find which css style is being applied to an element

In the following screenshot, some of the css style (red border) is being applied to the input fields to indicate the error. However I am unable to figure out which css selector it is, Firebug does not display any style being applied.

enter image description here

Demo: Sorry, there is no direct URL for the page, here's how you can see that:

  1. Go here: https://wordpress.org/themes/imgwize/
  2. Click on "Preview" button.
  3. Scroll down the page and click on the first post "Hello world". You can see the comment form there.
  4. Leave the fields empty and click on Post comment button.

Upvotes: 1

Views: 184

Answers (2)

Vali S
Vali S

Reputation: 1461

If you do the same on other browser, say Chrome, you will see the form doesn't have the same behaviour like in FireFox. This suggests it's a browser feature. I guess you noticed the form inputs all have the required attribute, which may determine this response from the browser when left blank.

Upvotes: 1

Rafal Lesniak
Rafal Lesniak

Reputation: 556

This is build-in, HTML5, native validation style of Firefox browser. It is done by applying required="required" HTML5 tag. You can remove this styling by appying :invalid CSS pseudo element.

textarea:invalid,
input:invalid {
   box-shadow: none;
}

Upvotes: 6

Related Questions