Question

在Site.css中有以下课程：

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

想要覆盖Edit.cshtml

中TextBoxFor字段的默认背景

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

它仍然使用默认的白色背景。我应该改变什么？

Answer 1

没有input[type="textbox"] 你的意思是text。

Answer 2

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

如果覆盖的内容则使用内联

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

Answer 3

我意识到问题出在CSS文件的位置。现在以不同的样式编码.CSS是：

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

在_Layout.cshtml中引用了Styles.css：

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

和CHTML：

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

它有效！

Answer 4

当您处理CSS时，您必须记住适用于该元素的最后一件事是显示为最终产品。

CSS从上到下，最后一个是最终结果。

order of precedence

在此网站中，您似乎可以使用!Important或!important

它没有说明所有的CAPS，但

关于!important覆盖的另一个Question，答案是关于为元素提供ID或执行一些<style>标记来实现此样式。

<强>加成

我认为最顶层的代码是你的CSS。在CSS中你需要使用选择器，就像你有一个像

这样的标签

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

然后用

选择它

#btn1

你抓住ID

如果你有

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

然后您可以选择btnClass这样的所有按钮

input.btnClass
{
}

请尝试此

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

OR

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

我认为语法正确

同时

这非常简单，如果这是答案，我们都会把头放在我们手中

CSS应该是

background-color:#f2f3f3 !Important

而不是

background:#f2f3f3 !Important

不确定这是否是问题的一部分，但我也会尝试从选择器中删除[type=text]。

如何覆盖TextBoxFor字段的CSS？

4 个答案: