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 can I make an H4 element behave like an HR when floats are present

    How to change dropdown submenu second level background?​

    How to use calc in CSS for mozilla firefox without position absolute

    How to get the css with in inline styles using jquery

    How to show a region on a image with CSS

    How to change custom icon image on hover of the link next to it?

    How to make a content property in css use php

    How can I make a full width videojs v5 progress bar?

    How do I change the opacity of an image when I hover of my text?

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    How to apply css background color to text only, in datatables cell

    How to make a span tag wider with an alphabet inside?

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How to achieve straight shadow with CSS?

    how to color share price changes: using css() method on dynamically created elements?

    How to make a button with image inside?

    How determine what CSS selector to use from my HTML source code?

    How to read different CSS classes with the same beginning with jquery?

    How to change MenuItem focus/hover color

    How to correctly affect multiple css properties in jquery

    How to show div of google maps after hidding it

    How to refer to css file in codeigniter? 2.0

    How to share images between subdomains?

    How do I centralize an ordered list?

    How can I add a css element change to an onlick event in this jquery lib?

    How to center my

    text using css?

    how can I make div have auto height according to content

    How can I improve my webpage code to be scalable for smaller sizes?

    How do I center a container in my HTML/CSS?

    CSS: How does setting a right margin cause the element's parent to become visible in this example?