라디오 및 체크 박스의 스타일을 재설정하고 다른 입력 스타일은 그대로 두십시오.

Question

두 개의 양식을 작성하고 텍스트 입력 및 텍스트 영역 스타일을 지정했습니다. 나는 이제 라디오 버튼과 체크 박스에 접근하고 있으며 자연스럽게 다른 입력 스타일을 상속 받았다.

재설정하고 기본 스타일링으로 되돌릴 수있는 방법이 있습니까? 나는이 문제를 실제로 다루지 못했다. css 또는 html 솔루션 만 찾고 있습니다. 여기

은 무슨 일이 일어나고 있는지의 사진입니다 : 여기 http://i.imgur.com/pAic3.jpg

내 관련 CSS입니다

/* style drop down box */ 
#panel_body select { 
    width:243px; 
    height:40px; 
    border:1px solid #9b9b9b; 
    border-radius:8px; 
} 

/* style input elements */ 
#panel_body input, #panel_body textarea { 
    width:243px; 
    height:40px; 
    border:1px solid #9b9b9b; 
    border-radius:8px; 
    background: -webkit-linear-gradient(top, #ffffff, #adadad); 
    background: -moz-linear-gradient(top, #ffffff, #adadad); 
    background: -o-linear-gradient(top, #ffffff, #adadad); 
    background: -ms-linear-gradient(top, #ffffff, #adadad); 
    background: linear-gradient(top, #ffffff, #adadad); 
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 
StartColorStr='#FFffff', EndColorStr='#adadad'); 

} 

/* style textareas */ 
#panel_body textarea { 
    box-sizing: border-box; 
    ms-box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    moz-box-sizing: border-box; 
    height:100px; 
    padding:5px; 
    font-family: Calibri, Arial, sans-serif; 
} 

/* input elements hover and select state */ 
#panel_body input:hover, #panel_body textarea:hover, 
#panel_body input:focus, #panel_body textarea:focus { 
    border-color: #025389; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 

Answer 1

사용 :

input[type=radio], input[type=checkbox] { 
    // Reset attributes here 
} 

하거나 input보다 더 구체적인 선택기를 사용 나머지 CSS는

Answer 2

체크 박스, 라디오 버튼을 추가 CSS에 대한 텍스트 상자 및 텍스트 영역

그리고 사용 input[type="radio"] 및 input[type="checkbox"]에 추가 CSS에 대한 사용 #panel_body input[type="text"],#panel_body textarea. 당신이 체크 박스와 라디오를 제외한 모든 입력 스타일을 원하는 경우

Answer 3

, 당신이 선택 사용합니다 : 난 당신이 다른 입력 종류가 있다는 것을 찾을 수 있습니다 생각

input:not([type="checkbox"]):not([type="radio"]) 

http://jsfiddle.net/29CTy/

을 당신 ' 또한 계단없는 상태 (특히 date 및 time 컬렉션)로 떠나기를 원할 것입니다. 그 목록은 내가 떠나 선호하는 유형의 목록보다 일반적으로 짧은 개인적으로, 나는 단지 의 texty 유형 입력 스타일을 스타일이 적용되지 않은 :

input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]