CSS复选框样式不起作用答案

【问题标题】：CSS checkbox styling not workingCSS复选框样式不起作用
【发布时间】：2016-07-27 17:37:43
【问题描述】：

我有我的复选框，我正在尝试使用以下 CSS 对其进行样式设置。

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>

复选框在我的表单中。

当我单击我的复选框时，这不起作用。我是造型新手，请告诉我错误在哪里。

【问题讨论】：

标签： javascript jquery html css checkbox

【解决方案1】：

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>

【讨论】：

【解决方案2】：

您必须在 CSS 中提及 id 或 class。如果你想动态添加 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>

【讨论】：

这不是 OP 想要的。 OP 希望根据选中的属性隐藏复选框并显示自定义图形而不是它。