How to factor a color and boder-color into a single CSS style and apply it on other parts of the CSS styles


Tags: css,css3,asp.net-mvc-4

Problem :

I have the following styles in a Site.css which is part of a ASP.NET MVC4 Site

form label.error { font-size: 12px; color: #cc0000; }
form input:not([type="submit"]).error{ border-color: #cc0000; }
form select:not([type="submit"]).error{ border-color: #cc0000; }
.error { color: #cc0000; }

I want to know how can I modify that file to be able to change that #cc0000; without changing it on every single line (factor out the color used for validation errors in this case)

Something similar to this:

errorStyle {
    color: #cc0000 ;
    border-color: #cc0000;
}

And then use it like this:

form label.error { font-size: 12px; errorStyle }
form input:not([type="submit"]).error{ errorStyle }
form select:not([type="submit"]).error{ errorStyle }
.error { errorStyle }

In this way if the client wants that color to be changed it easier to maintain.



Solution :

One simple way of avoiding repetition without using any pre-processors would be to apply the error class (the one that contains the color) to the form element and then make use of currentColor to use the same color that was applied to the parent.

The currentColor is a keyword that points to existing color that is applied to the element. Support for this keyword is pretty decent and it works in all major browsers except IE8.

For border-color, the default value is always the same as the color applied to the element (which again is same as the currentColor) and hence we could also use inherit as the value instead of currentColor. The inherit basically tells the browser to inherit the parent's border color.

In the below snippet, I've applied currentColor for one element and inherit for another element to just show how both give same output.

form.error label {
  font-size: 16px;
}
form.error input:not([type="submit"]) {
  color: currentColor;
  border-color: currentColor;
}
form.error select {
  color: inherit;
  border-color: inherit;
}
.error {
  color: #cc0000;
}
<form class='error'>
  <label>Hello</label>
  <input type="text" />
  <select>
    <option>1</option>
  </select>
</form>


If you want to apply the error class to the individual elements also (that is, add red border and color only to the element with error) then that is also possible.

form.error label.error {
  font-size: 16px;
}
form.error input:not([type="submit"]).error {
  border-color: currentColor;
}
form.error select.error {
  border-color: inherit;
}
.error {
  color: #cc0000;
}
<form class='error'>
  <label class='error'>Hello</label>
  <input type='text' class='error' />
  <select class='error'>
    <option>1</option>
  </select>
  <input type='text' />
</form>


    CSS Howto..

    How to add CSS for dynamic MenuItems in MenuList and How to get the value of the MenuItem in XUL

    How to make background image with aspect ratio in html and css [closed]

    How can `animation-play-state` in CSS be initially set to `paused` and changed to `running`?

    How to get the correct mouse position in relation to a div that has has a scale transform applied

    PHP: How to style session output [closed]

    How to filter elements on click in js?

    How to create a web page with 4 rectangurlar splits?

    How to “crop” a rectangular image into a square with CSS?

    How to style a subset of some text in HTML/CSS?

    how to add css file to node js(not express) code

    Where Can I Learn How To Fit A Website To Fit Many Android Resolutions?

    How can you resize li labels without resorting to coupling or absolute sizes?

    How to use jQuery to find a certain string within a div, and then apply specific styles to another div if it exists? [closed]

    CSS, how to put a div inside a div that is responsive?

    How to render checked checkboxes using CSS alone?

    Show and hide table column using jQuery

    how to clip text in css like gmail does to emails subject listings

    How can I apply CSS Mixins with native Javascript?

    CSS: How to force DIV to maintain aspect ratio the same way IMG does

    How to create page breaks automatically in CSS?

    How to call a javascript function with a css button? [closed]

    How to change CSS with jQuery change and this

    How to create a static footer in CSS?

    How to include multiple Css Class in ActionLink?

    How to avoid gaps using Isotope with Masonry layout sortby random

    hide form with css3 and show default div.

    How to make button in unordered list “highlight” by adding a border on click?

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    How to achieve the following design in css in jquery mobile

    css: how to access a value that is not used by an element?