html

CSS3 Required input form styling removal

If you ever wondered how the hell to style/disable the input styling when using the new CSS3 required selectors you can do it with:

  1. input:valid {
  2.     box-shadow:             #0f0 0 0 1.5px 1px;
  3. }
  1. input:invalid {
  2.     box-shadow:             #f00 0 0 1.5px 1px;
  3. }

From my testing, webkit browsers seem to fallback to outline in case box-shadow: is set to none;
So you can use outline: none; to disable that as well.

Technology: 
Subscribe to html