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