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 do I place text to the right of a relatively positioned image?

    How to avoid text go below the thumbnail with css

    how to align the content to center of page using css

    How to remove space from top of web page

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    css how to increase the size of rounded image button with varying text

    How to make text blink on website? [duplicate]

    How can I use CSS to create a middle column that fills the height of the page?

    Jquery Ui Sortable showing broken image in IE8

    How to automate background width in CSS

    How to remove zoom effect of tile(metro ui css) using javascript

    How to include a css stylesheet in Orchard module?

    How to make text box to overlap with the image?

    How to remove inline css with jQuery onClick [closed]

    How to create radio button as buttons?

    How to write a more specific css

    CSS\HTML - How to add Ionicons to CSS “content” property?

    How to automaticly let HTML cut the edges based on the setted height of the image?

    How can I get the font size of an element as it was set by css

    jason lewis basset did not show icons well in laravel 4

    How to highlight the menu item for the sort type of data on the page?

    Show icon font on image center on mouse hover

    how to make the parent width equals the width of all element inside it?

    how do i get css source file path from firebug?

    How to achieve the same background image effect made in other stack communities?

    How to define a set of CSS class names so Vim knows how to autocomplete

    how to change css styles of custom jquery widget?

    DotNetNuke Skinning: How do I use\add skin.css?

    How to place rectangle inside image and make hover animation for it in CSS?

    How to make these jquery pop ups fall back to css when javascript disabled