How to override CSS for TextBoxFor field?

Question

Have the following class in Site.css:

input[type="textbox"].TextBoxAsLabel {
     background:#f2f3f3  !IMPORTANT;
}

want to override default background for TextBoxFor field in Edit.cshtml

@Html.TextBoxFor(model => model.ClientNumber, new {@readonly = "readonly", @class = "TextBoxAsLabel"})

and it still uses default white background. What should I change?

Answer 1

I realized that problem was in location of CSS file. Now code in separate styles.CSS is:

  .message-label {
    background-color: #f2f3f3;
  }

Styles.css is referenced in _Layout.cshtml:

 <link href="@Url.Content("~/Content/styles.css")" rel="stylesheet" type="text/css" />

and in CHTML:

 @Html.TextBoxFor(model => model.ClientNumber, new {@readonly = "readonly", @class ="message-label"})

and it works!

Answer 2

There is no input[type="textbox"].
You mean text.

Answer 3

input[type=text].TextBoxAsLabel
{
   background:#f2f3f3 !important;
}

If something overriding then use inline

@Html.TextBoxFor(model => model.ClientNumber, new {@readonly = "readonly",
              @class = "TextBoxAsLabel", @style='background:#f2f3f3 !important'})

Answer 4

when you are dealing with CSS you have to remember that the last thing that applies to that Element is what shows as the final product.

CSS goes Top to bottom, the last thing is the final result.

order of precedence

in this site it looks like you can either use !Important or !important

it said nothing about all CAPS though

Another Question about the !important override, the answer talks about giving the element an ID or doing some <style> tags to implement this style.

Addition

I assume that the top set of code is your CSS. in CSS you need to use Selectors, like if you have a Tag like

<input type="button" id="btn1" />

then you select it with

#btn1

you grab by the ID

if you have

<input type="button" class="btnClass" />

then you can select all the buttons with btnClass like this

input.btnClass
{
}

Please Try This

input.TextBoxAsLabel {
    background:#f2f3f3  !IMPORTANT;
}

OR

#ClientNumber input {
    background:#f2f3f3  !IMPORTANT;
}

I think that syntax is correct

Also

this is super simple, we are all going to put our heads in our hands if this is the answer

the CSS should be

background-color:#f2f3f3 !Important

and not

background:#f2f3f3 !Important

Not sure if this is part of the problem but I would also try to Remove [type=text] from the selector.