0

我刚刚看过一个关于 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。但这也不起作用。那么我需要做什么才能让它工作呢？

4

1 回答 1

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-boxinput.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;
}
于 2012-08-15T10:42:53.410 回答