Флажок CSS input, если вход уже определен

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

Вам нужно применить стиль от ид #msform полностью перезаписать предыдущее заявление.

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

Попробуйте сыграть с ним сейчас.

Answer 2

Добавление ширина 100% в этикетке совместив их

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