CSS checkbox styling not working

У меня есть мои флажки, и я пытаюсь создать его с помощью следующего CSS.CSS checkbox styling not working

input[type="checkbox"]{ 
 
    display: none; 
 
    border: none !important; 
 
    box-shadow: none !important; 
 
} 
 

 
input[type="checkbox"] + label span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 30px; 
 
    height: 30px; 
 
    background: url(/static/app/images/check_no.svg); 
 
} 
 

 
input[type="checkbox"]:checked + label span { 
 
    background: url(/static/app/images/check_yes.svg); 
 
    content: ''; 
 
    color: #fff; 
 
    vertical-align: middle; 
 
    width: 30px; 
 
    height: 30px; 
 
}

<div class="check1"> 
 
    <input id="id_contract_name" name="contract_name" type="checkbox"> 
 
    <label for=" id_contract_name "> 
 
     <span class="chk_contract"></span> Name on Contract 
 
    </label> 
 
</div> 
 

 

 
<div class="check2"> 
 
    <input id="id_is_ceo" name="is_ceo" type="checkbox"> 
 
    <label for=" id_is_ceo "> 
 
    <span></span> CEO? 
 
    </label> 
 
</div>

Флажки в моей форме.

Это не работает, когда я нажимаю свой флажок. Я новичок в дизайне и даю знать, где ошибка.

источник

2016-07-27 Yogi

У вас есть пробелы вокруг имени в атрибуте for, удалите их.

Работа демо:

input[type="checkbox"]{ 
 
display: none; 
 
border: none !important; 
 
box-shadow: none !important; 
 
    } 
 

 
     input[type="checkbox"] + label span { 
 
display: inline-block; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
background: url(/static/app/images/check_no.svg); 
 

 
     } 
 

 
    input[type="checkbox"]:checked + label span { 
 
background: url(/static/app/images/check_yes.svg); 
 
content: ''; 
 
color: #fff; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
     /*added this to show the behavior here on SO*/ 
 
     background-color: #000 
 
}

 <div class="check1"> 
 
      <input id="id_contract_name" name="contract_name" type="checkbox"> 
 
      <label for="id_contract_name"> 
 
       <span class="chk_contract"></span> Name on Contract 
 
      </label> 
 
     </div> 
 

 

 
    <div class="check2"> 
 
      <input id="id_is_ceo" name="is_ceo" type="checkbox"> 
 
      <label for="id_is_ceo"> 
 
       <span></span> CEO? 
 
      </label> 
 
     </div>

источник

2016-07-27 09:28:43 beerwin

Вы должны упомянуть идентификатор или класс в CSS. И если вы хотите добавить css динамически, вы должны использовать javascript или jquery.

#id_contract_name{ 
 
display: none; 
 
border: none !important; 
 
box-shadow: none !important; 
 
    } 
 

 
     #id_is_ceo { 
 
display: inline-block; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
background: url(/static/app/images/check_no.svg); 
 

 
     } 
 

 
    input[type="checkbox"]:checked + label span { 
 
background: url(/static/app/images/check_yes.svg); 
 
content: ''; 
 
color: #fff; 
 
vertical-align: middle; 
 
width: 30px; 
 
height: 30px; 
 
}

<html> 
 
<body> 
 
    <div class="check1"> 
 
      <input id="id_contract_name" name="contract_name" type="checkbox"> 
 
      <label for=" id_contract_name "> 
 
       <span class="chk_contract"></span> Name on Contract 
 
      </label> 
 
     </div> 
 

 

 
    <div class="check2"> 
 
      <input id="id_is_ceo" name="is_ceo" type="checkbox"> 
 
      <label for=" id_is_ceo "> 
 
       <span></span> CEO? 
 
      </label> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-07-27 09:29:43 Pirate

Это не то, что ОП хочет. OP хочет скрыть этот флажок и отобразить пользовательскую графику вместо него на основе проверенного свойства. – beerwin

CSS checkbox styling not working

ответ

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