CODEWITHSUNDEEP
htmltwitter-bootstrapcssasp.net-mvc-5
John John
John John

Reputation: 1

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

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:-

enter image description here

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;
}

Upvotes: 0

Views: 3247

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

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/

Upvotes: 3

Related Questions