2016-12-22 3 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

Смежные вопросы