How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?


Tags: css,html5,google-chrome,firefox

Problem :

I have to bring red borders around the input element in chrome on HTML5 validation like as that of Firefox.

Firefox Validation

I have search it a lot but unable to find precise answer. Any help of how to do it using css is greatly appreciated.

Thank you.



Solution :

You use the :valid pseudo class.

To shamelessly copy the code from https://developer.mozilla.org/en-US/docs/Web/CSS/:valid:

input:invalid {
  background-color: #ffdddd;
}
form:invalid {
  border: 5px solid #ffdddd;
}
input:valid {
  background-color: #ddffdd;
}
form:valid {
  border: 5px solid #ddffdd;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}
<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>


    CSS Howto..

    How to disable and re-enable tabindex of hidden/visible elements?

    CSS: How to add background-color with background-image under it (same color)

    How to add new CSS rule to inner id

    How to make an entire square div clickable with CSS?

    How to show inline help using simple css and jquery

    How to attach user CSS to Microsoft Edge?

    How to fix the my Anchor link issue [duplicate]

    How can I click a specific li without an id or class?

    How does this website render images?

    CSS column header with img - how to dock img/div to the right?

    How do I vertically center align a position:relative element

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to make circle thing in CSS? [duplicate]

    how to make full css container

    How to change focus color when input is filled in with required attribute javascript/html/css

    How to make lightbox scroll the lightbox and not the page

    How to select an UNTAG element in CSS

    How to select multiple items using mouse click?

    How to append() an element and set its style with css() at the same time with jQuery

    CSS background 100% height - How to do?

    How to add CSS class to asp.net from code behind [closed]

    Flexbox in Chrome--How to limit size of nested elements? [duplicate]

    How to set column width for DataTables

    How can I arrange for a horizontal scroll bar on overflow with flexbox items?

    How to override all of the CSS for a specific element?

    How to set an image when we select its sub menu

    How to use Pseudo-Elements : before & :after to create end caps

    Is it possible to see how your html & css code would look on a mobile device without actually have a website url?

    how to inherit classes in css

    Example of how to load static CSS files from node_modules using webpack?