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

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"。

或使用下文提到的另一种方法：

使用input[type=textbox]代替input.text-box或input.data在你的CSS这样的：

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; 
}