my custom site.css inside my asp.net mvc-5 is not overriding the built-in styles

Question

I am working on an asp.net mvc-5 web application. and i have the following inside my shared _layout view:-

<link id="bs-css" href="~/Content/css/bootstrap-cerulean.css" rel="stylesheet">

<link href="~/Content/css/charisma-app.css" rel="stylesheet">
<link href="~/Content/css/bootstrap-responsive.css" rel="stylesheet">
<link href="~/Content/start/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
@Styles.Render("~/Content/templete")

so mainly i am referencing the built-in bootstrap .css files first, then i am referecning the bundle @Styles.Render("~/Content/templete") which contain our site.css. so this means that the site.css should override the built-in .css files, since i am referencing the site.css after them...

now the problem i am facing is that i have the following style define inside my site.css:-

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

to show a red boarder if an input have any validation error. now inside my application i will not get this faulty behavior as follow:-

where as shown in the picture the input field will not have any red boarder unlike the drop-down field. now as shown in the firebug , the following css rules which are defined inside the bootstrap-cerulean.css will override the site.css style (although i am referencing the site.css after the bootstrap-cerulean.css):-

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

so can anyone adivce how i can force this style , to have the intended effect on the input fields ?

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

Joseph Marikle · Accepted Answer · 2016-01-19 16:30:04Z

3

Attribute selectors have higher specificity than class selectors. Even though your class selector is later in the stylesheet, it's still overridden by the more specific attribute sectors higher in the file.

input[type=text] {
  background: #FFF;
  border: 1px solid #DDD;
}

.error {
  background: rgba(255,0,0,0.3);
  border: 1px solid #F88;
}

<input class="error" type="text">

Try adding the attribute part to your error class to increase the specificity of it.

input[type=text] {
  background: #FFF;
  border: 1px solid #DDD;
}

input[type=text].error {
  background: rgba(255,0,0,0.3);
  border: 1px solid #F88;
}

<input class="error" type="text">

I haven't read it, but this article looks pretty good: https://css-tricks.com/specifics-on-css-specificity/

answered Jan 19, 2016 at 16:30

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

John John Over a year ago

so why i did not get this on the dropdown field ? i mean on the dropdown list it will have a red boarder and red background... second question. in my case the .input-validation-error will automatically apply to any field that have validation error (this is part of the MVC framework validation) , so not sure if i have the ability to define class="error" in my case...so i still need to do the styling inside the .input-validation-error.....

Joseph Marikle Over a year ago

@johnG bootstrap doesn't attempt to style select items. They are notorious for being difficult to work with. I usually grab a javascript library to make it have the bootstrap styles rather than deal with all the browser specific styles. I think bootstrap doesn't even try to style it, but if it does, it'll use select { ... } which has lower specificity than a class selector. It's not using the attribute selector (e.g. [type=whatever]) which is why the other selectors have higher specificity.

Joseph Marikle Over a year ago

@johnG for the second question, you have two options. in your stylesheet you can shotgun it with input[type="text"].input-validation-error, input[type="password"].input-validation-error, ... .input-validation-error or you can use !important. the stated purpose of !important is to override specificity, so it's within the acceptable uses of !important. I would go with the first option, however. So, yes, you are correct. Adding the extra input[type=whatever] parts to your selector is appropriate.

Joseph Marikle Over a year ago

Yes, you are correct. That should work in your case and it's how I would do it too.

Joseph Marikle Over a year ago

@johnG You're welcome. Glad I could help. And sorry for my slow typing. We kind of ran into eachother there a couple times in these comments. :P

|

Collectives™ on Stack Overflow

my custom site.css inside my asp.net mvc-5 is not overriding the built-in styles

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related