입력이 이미 정의되어있을 때 CSS 입력 체크 상자

Question

양식에 제 선택란을 올바르게 정렬하는 데 어려움이 있습니다. jsfiddle을 만들었습니다 HERE CSS는 이전에 입력을 정의하지만 CSS 코드 하단에 특정 확인란 입력을 정의했습니다. 웬일인지, 그것은 작동하지 않고있다.

홈페이지 CSS :

/*inputs*/ 
#msform input, #msform textarea { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    width: 100%; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
} 

추가 확인란 라벨 및 입력 (제대로 작동하지 않는)

label { 
    float: left; 
    display: block; 
    padding-left: 15px; 
} 
input[type=checkbox] { 
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: middle; 
    position: relative; 
    top: 26px; 
    right: 60px; 
    *overflow: hidden; 
} 

Answer 1

당신은 완전히 이전의 선언을 덮어 ID #msform에서 스타일을 적용해야합니다.

#msform input[type=checkbox] { 
    width: 13px; 
    height: 13px; 
    padding: 0; 
    margin:0; 
    vertical-align: middle; 
    position: relative; 
    top: 26px; 
    right: 60px; 
    overflow: hidden; 
} 

지금 사용해보세요. 라벨 폭이 100 %를 추가

는

Answer 2

트릭을 #msform를 않았다 추가 그들에게

label { 
float: left; 
display: block; 
padding-left: 15px; 
width:100%; 
}