Question

I am tryng to style a checkbox in a simple form with bootstrap styles, based on the criteria if it's checked or unchecked. However it does not work for some reason. The span elements that carry styling do not recieve styling for checked and unchecked states. Please note, this form repeats on the page multiple times, with the input element keeping the same id and name (however, if it appears only once it still doesn't work)

input[type='button'].icon-checkbox {
  display: none
}

input[type='checkbox'].icon-checkbox {
  display: none;
}

input[type='checkbox'].icon-checkbox+label .unchecked {
  display: inline-block;
}

input[type='checkbox'].icon-checkbox+label .checked {
  display: none;
}

input[type='checkbox']:checked.icon-checkbox {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+label.unchecked {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+label .checked {
  display: inline-block
}

<form style="display: block;" id="commentary_14">
  <label for="id_is_anonymous">
    <span classname="checkbox-label-text">Stay Anonymous</span>             
    <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>             
    <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span>
  :</label>
  <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> (...)
</form>

Jennifer Goncalves created a fiddle, thanks for that (I know about fiddles but just never setuped one myself). As you can see, two checkboxes appear one checked and one unchecked. However they are unclickable, don't change the state and also, only one should appear based on the state of the input.

working fiddle

Answer 1

HTML

<form style="display: block;" id="commentary_14">
  <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox">
      <label for="id_is_anonymous">
            <span classname="checkbox-label-text">Stay Anonymous</span>             
            <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>             
            <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span>
      :</label>

 (...)    
</form>

CSS

input[type='checkbox'].icon-checkbox{display:none;} 

input[type='checkbox'].icon-checkbox+label .unchecked{display:inline-block;}
input[type='checkbox'].icon-checkbox+label .checked{display:none;}

input[type='checkbox'].icon-checkbox:checked+ label .unchecked{display:none}
input[type='checkbox'].icon-checkbox:checked+ label .checked{display:inline-block}

codepen link 希望这有效..

Answer 2

这里有两个问题。首先，你不能在CSS中倒退。因此，当您使用+运算符时，您必须按照编写它们的顺序包含元素。

因为您的代码编写如下：

input[type='checkbox'].icon-checkbox + label

...您需要将输入字段物理地放在标签上方作为兄弟。或者，您可以交换CSS。

第二个问题是CSS中的拼写错误。

此行缺少空格：

input[type='checkbox']:checked.icon-checkbox+ label.unchecked{display:none}

......应该是：

input[type='checkbox']:checked.icon-checkbox + label .unchecked{display:none}

label和.unchecked之间没有空格，您的代码正在寻找一个未经检查的类别的标签，而不是未选中的类型的孩子。

最终代码的功能如下。

HTML：

<form style="display: block;" id="commentary_14">
    <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox">
    <label for="id_is_anonymous">
        <span classname="checkbox-label-text">Stay Anonymous</span>
        <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18"></span>
        <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18"></span> :
    </label>
    (...)
</form>

CSS：

input[type='button'].icon-checkbox {
  display: none
}

input[type='checkbox'].icon-checkbox {
  display: none;
}

input[type='checkbox'].icon-checkbox+label .unchecked {
  display: inline-block;
}

input[type='checkbox'].icon-checkbox+label .checked {
  display: none;
}

input[type='checkbox']:checked.icon-checkbox {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+ label .unchecked {
  display: none
}

input[type='checkbox']:checked.icon-checkbox+ label .checked {
  display: inline-block
}

JSfiddle示例：https://jsfiddle.net/jennifergoncalves/eh21d8bd/

Answer 3

试试这个：

＆＃13;

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + label #unchecked {
   display: inline-block;
}
input[type=checkbox] + label #checked {
   display: none;
}
input[type=checkbox]:checked + label #unchecked {
   display: none;
}
input[type=checkbox]:checked + label #checked {
   display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form style="display: block;" id="commentary_14">
      <input type="checkbox" name="is_anonymous" id="id_is_anonymous" checked="" class="icon-checkbox"> 
      <label for="id_is_anonymous">
            <span classname="checkbox-label-text">Stay Anonymous</span>:        
            <span title="Remain Anonymous" class="hvr-grow pointer orange glyphicon glyphicon-unchecked unchecked px18" id="unchecked"></span>             
            <span title="Contribute with your username" class="hvr-grow pointer orange glyphicon glyphicon-check checked px18" id="checked"></span>
      </label>
</form>

＆＃13;

Answer 4

此示例可帮助您...

SpeedSliderRepeatButtonStyle

/* The customcheck */
.customcheck {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.customcheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
    background-color: #02cf32;
    border-radius: 5px;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.customcheck .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Styling a checkbox on unchecked (with bootstrap)

4 个答案: