或使用下面提到的另一种方式：

Question

我刚刚看过一个关于CSS3的培训视频，在我的MVC应用程序中加入这些样式看起来是一个好主意;

input.data:required {
    background-color: rgba(255, 0, 0, 0.04);
}

input.data:focus {
    background-color: rgba(255, 255, 255, 0.8);
    border: 5px solid #ff5400;
}

因此，这将为所需字段添加背景颜色，并突出显示焦点的文本框。但是这些样式在我的MVC表单中没有被提取出来;

            <tr>
                <td style="text-align: right">
                    Client Organisation Name<span class="error">*</span>
                </td>                    
                <td>
                    @Html.TextBoxFor(model => model.clientContact.ContactName, 
                        new { autocomplete = "off", maxlength = "255", style = "text-transform: capitalize; width:400px;" })
                    @Html.ValidationMessageFor(model => model.clientContact.ContactName)
                </td>
            </tr>

当我检查文本框字段时，我看到输入元素有一个“文本框”类型。所以我将input.data更改为input.text-box和input.text。但这也不起作用。那么我需要做些什么才能让它发挥作用呢？

Answer 1

.data实际上是在textbox上应用的类名。在文本框中定义css类名data。

喜欢这样：

<td>
    @Html.TextBoxFor(model => model.clientContact.ContactName, 
        new { autocomplete = "off", maxlength = "255", @class= "data", style = "text-transform: capitalize; width:400px;" })
    @Html.ValidationMessageFor(model => model.clientContact.ContactName)
</td>

请注意上述代码中的@class= "data"。

或使用下面提到的另一种方式：

在您的CSS中使用input[type=textbox]代替input.text-box或input.data，如下所示：

input[type=textbox]:required {
    background-color: rgba(255, 0, 0, 0.04);
}

input[type=textbox]:focus {
    background-color: rgba(255, 255, 255, 0.8);
    border: 5px solid #ff5400;
}

MVC3，CSS3 - 无法在文本框中获取样式

1 个答案:

或使用下面提到的另一种方式：