Заполнить флажок при выделении с CSS

Question

Можно ли заполнить флажок цветом фона, если он установлен? Также, чтобы отключить саму «галочку».

Как мне этого добиться? Должен ли я смотреть на jQuery / Javascript для этого?

Демонстрация Fiddle: http://jsfiddle.net/119a7e8r/

li.squaredTwo li label {
  display:none
}

input[type=checkbox]:checked {
  background:red
}

<ul>

  <li id='field_1_20' class='gfield squaredTwo field_sublabel_below field_description_below' >
  
  <label class='gfield_label'  >Is it free</label>
  
  <div class='ginput_container ginput_container_checkbox'>
    
    <ul class='gfield_checkbox' id='input_1_20'>
  
      <li class='gchoice_1_20_1'>
        <input name='input_20.1' type='checkbox'  value='Yes'  id='choice_1_20_1' tabindex='35'  />
        <label for='choice_1_20_1' id='label_1_20_1'>Yes</label>

      </li>
      
    </ul>
    
  </div>
  
  </li>

</ul>

javascript jquery html css

1

michaelmcgurk 15 Дек 2015 в 20:16

Answer 1

Вот отличное CSS-решение для пользовательских флажков:

.hideme {
  display: none;
}

.woo {
  cursor: pointer;
}

.hideme + .woo:before {
  width: 10px;
  height: 10px;
  border: 2px solid gray;
  border-radius: 2px;
  box-shadow: -1px 1px 2px 2px rgba(0,0,0,0.2);
  background: red;
  position: relative;
  display: inline-block;
  margin-right: 1ex;
  content: "";
}

.hideme:checked + .woo:before {
  background: green;
}

<input type="checkbox" class="hideme" id="myinput" /><label class="woo" for="myinput">Click me</label>

2

casraf 15 Дек 2015 в 17:38

Answer 2

Я думаю, что вы должны смотреть на jQuery для этого. Вот несколько примеров других вопросов о переполнении стека, с рабочим jsfiddle

hope this helps!

-1

Community 23 Май 2017 в 12:07

Answer 3

Моя отправная точка для просто чистого CSS на этом была бы что-то вроде этого:

HTML

<input type="checkbox">Hello</input>

CSS

input[type=checkbox] {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: bottom;
}

input[type=checkbox]:after {
  content: "";
  border-bottom: 10px solid red;
  border-top: 10px solid red;
  display: block;
  opacity: 1;
}

input[type=checkbox]:checked:after {
  border-bottom: 10px solid blue;
  border-top: 10px solid blue;
}

Демонстрация: http://codepen.io/newanalog/pen/LppBgv

Попробуйте поиграть с непрозрачностью и размерами.

0

newanalog 15 Дек 2015 в 17:52

Заполнить флажок при выделении с CSS

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript