指定 css 类的 Html.TextBox 与表单验证 css 冲突（输入验证错误）答案

【问题标题】：Html.TextBox with css class specified conflicts with form validation css (input-validation-error)指定 css 类的 Html.TextBox 与表单验证 css 冲突（输入验证错误）
【发布时间】：2009-06-18 22:20:04
【问题描述】：

有趣的情况。我有一个 Html.Textbox() 从视图中呈现如下：

<%= Html.TextBox("title", Model.Title, new { @class = "txt" }) %>

在我的控制器中，我对标题进行了以下稍微简化的验证。为了论证起见，假设它发现了错误，并使用模型状态错误信息重新渲染视图。

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditBook(string title) {
    Model = new Book(ControllerContext.RequestContext);
    if (String.IsNullOrEmpty(title))
    {
        title = String.Empty;
        ModelState.AddModelError("title", "* Title is a required");
        modelState.SetModelValue("title", ValueProvider["title"]);
    }
    else { // show confirmation }

    if (!ModelState.IsValid)
    {
        return View("EditBook", Model);
    }
}

当页面重新渲染时，我的 html 文本框正确地附加了 input-validation-error 类...但它没有用，因为它是第一个附加的类！我需要它来覆盖我的文本框中的所有现有样式。 html输出如下：

<input type="text" name="title" id="title" class="input-validation-error txt"/>

假设已定义以下 css 样式：

input.txt { border: 1px; color: #000 }
.input-validation-error { border: 2px solid #fff }

问题是，我原来的 css 类“txt”优先，并阻止我正确设置错误文本框的样式。

有什么想法吗？

【问题讨论】：

标签： asp.net-mvc

【解决方案1】：

这更像是一个 CSS 问题，而不是特定于 ASP.NET MVC 的问题。您应该查看CSS spec 的级联顺序部分。

考虑到这一点，您可以通过如下调整来更改样式的优先级：

input.txt { border: 1px; color: #000 }
input.input-validation-error { border: 2px solid #fff }

将 input 元素添加到 input-validation-error 类后，两种样式的特异性将相同。这将导致样式的声明顺序用于确定优先级（在这种情况下，规范说最后一个声明的获胜）。

请注意，上面的示例只是您可以控制优先级的一种方法...可能有更好的方法，但我不是 CSS 专家。如果您使用 CSS 标签重新提出 CSS 问题，您可能会得到更好/更有洞察力的回答。

PS。在确定优先级时，在元素上声明类名的顺序无关紧要。

【讨论】：

请记住，您可以为 CSS 规则设置多个选择器：input.input-validation-error, .input-validation-error { border: 2px solid #fff }，这样您就不会丢失类 input-validation-error 的非元素的样式。

【解决方案2】：

如果您添加 !important 修饰符，它应该有助于解决这个问题。

.input-validation-error { border: 2px solid #fff !important; }

另外，稍微修改一下@DSO所说的，我敢肯定你也可以试试这个：

input.txt { border: 1px; color: #000 }
input.txt.input-validation-error { border: 2px solid #fff }

就像我说的，如果你有两个 CSS 类，我很确定你可以做到这一点。

【讨论】：

请注意，IE6 中的多类选择器 (input.txt.input-validation-error) 存在问题 - 请参阅 quirksmode.org/css/multipleclasses.html
啊，不知道，谢谢。我会根据这些信息尝试 !important 标记。

【解决方案3】：

我完全没有依赖框架来呈现样式，而是采用了一种方法，我可以应用我自己的 css 类，同时仍然使用大部分 Html.ValidationMessage() 基础结构。

看起来像这样：

<% bool emailError = !String.IsNullOrEmpty(Html.ValidationMessage("email"));  %>
<div id="EmailMod" class="module <%= emailError ? "error" : String.Empty %>">
    <label class="text_right">Email address</label>
    <div class="input">
        <input type="text" id="Email" name="Email" class="input" tabindex="1" />
        <p id="EmailRequired" class="required <%= emailError ? "" : "hide" %>">* Please enter a valid email address.</p>
    </div>
</div>

【讨论】：