2016-12-22 26 views
0

我正在使用以下代码。该复选框不想用我给它的样式进行检查。单击标签不检查我的输入字段

<div class="form-group"> 
    <div class="col-md-6 col-md-offset-4"> 
     <div class="checkbox"> 
      <input name="remember" type="checkbox" ><label>Wachtwoord onthouden</label> 
     </div> 
    </div> 
</div>' 

和CSS:

col-md-4.control-label, #email, #password { 
    margin: 20px auto; 
    width: 300px; 
    resize: none; 
    font-family: 'Exo 2', sans-serif; 
    font-size: 1em; 
    outline: none; 

} 

.btn.btn-link, .checkbox { 
    display: block; 
    margin-top:20px; 
    margin-bottom:20px; 
    color: $white; 
} 

[type="checkbox"]:not(:checked), 
[type="checkbox"]:checked { 
    position: absolute; 
    left: -9999px; 
} 
[type="checkbox"]:not(:checked) + label, 
[type="checkbox"]:checked + label { 
    position: relative; 
    padding-left: 25px; 
    cursor: pointer; 
} 

/* checkbox aspect */ 
[type="checkbox"]:not(:checked) + label:before, 
[type="checkbox"]:checked + label:before { 
    content: ''; 
    position: absolute; 
    left:0; top: 2px; 
    width: 17px; height: 17px; 
    border: 1px solid #aaa; 
    background: #f8f8f8; 
    border-radius: 3px; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3) 
} 

/* checked mark aspect */ 
[type="checkbox"]:not(:checked) + label:after, 
[type="checkbox"]:checked + label:after { 
    content: '✔'; 
    position: absolute; 
    top: 3px; left: 4px; 
    font-size: 18px; 
    line-height: 0.8; 
    color: $background_color_green; 
    transition: all .2s; 
} 

/* checked mark aspect changes */ 
[type="checkbox"]:not(:checked) + label:after { 
    opacity: 0; 
    transform: scale(0); 
} 

[type="checkbox"]:checked + label:after { 
    opacity: 1; 
    transform: scale(1); 
} 

这是非常奇怪的,因为我用的是完全一样的风格在网站上其他部分,但它确实在那里工作。它应该作为该部分的工作,对吧?

+0

你必须使用标签分配给输入'你想在你的声明添加输入<标签=“记住”>' – Roberrrt

+0

海? – reporter

回答

5

您必须将标签分配给正确的输入,因此要么使用for属性,要么将标签放置在输入中(但会破坏当前的CSS代码)。

以下HTML应该会产生所需的结果。

<div class="form-group"> 
    <div class="col-md-6 col-md-offset-4"> 
     <div class="checkbox"> 
      <input id="remember" name="remember" type="checkbox" ><label for="remember">Wachtwoord onthouden</label> 
     </div> 
    </div> 
</div> 
+0

你真聪明! – Tigerotic