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"에게.

또는 아래에 언급 된 다른 방법으로 사용이처럼 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; 
}