当输入已定义时，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; 
} 

现在就试试吧。

Answer 2

在标签添加宽度100％对准他们

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