Как делать спрятанный, персонализированный checkbox?

Я пробую делать один checkbox настроенный, в котором изменился цвет фона меня label как он выбран или нет, и этого fora прятать checkbox в если. Код, который у меня есть, - этот:

.milabel {
  background-color:#c9c9c9;
  border-radius:5px;
  padding:20px;
  cursor:pointer;
  }
input:checked{
  }
<input id="micb" type="checkbox"><br><br>
<label class="milabel" for="micb"> Hola mundo! Soy clickeable </label>

Я знаю, что с input:checked возможно изменять checkbox в себе, чтобы давать ему некий стиль, но я не знаю.

3
задан 03.02.2017, 19:27
2 ответа

Чтобы менять цвет label

.checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;  
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>

Update:

, Чтобы прятать checkbox, выбрав label, ты можешь использовать немного jQuery:

$('.checkBoxLabel').click(function(){
  
  var checkbox = $('#check');
  
  if ( checkbox.css('visibility') == 'hidden' ) {
    
    checkbox.css('visibility','visible');
    
  } else {
    
    checkbox.css('visibility','hidden');
  }
});
.checkBoxLabel {
  width: 200px;
  padding: 10px 0;
  background-color:#c9c9c9;
  border-radius:5px;
  cursor:pointer;
  text-align: center;
  display: inline-block;
}

.checkBox:checked + .checkBoxLabel {
  background-color: pink;
  color: #fff;
}

div {
  margin-top: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="check" class="checkBox">
  <label for="check" class="checkBoxLabel">My Label</label>
</div>
4
ответ дан 24.11.2019, 11:49
  • 1
    Спасибо, это - то, что он искал, но я заметил вещь... label не является настраиваемым (не возможно изменять Вашу высоту и ширину например чтобы считать некоторые равными tamañ или не завися от Вашего контента) Как podrí чтобы делать немного así? – Pavlo B. 29.12.2016, 17:25
  • 2
    @PavloB. Вот, в моем ответе, если, что изменил высоту и ширину label (он, где я устанавливаю цвет). Один label не может получать высоту и ширину, потому что его inline. Tendrá s, что помещать это как inline-block или block для того, чтобы он смог получать высоту и ширину. inline-block, если то, что ты хочешь, состоит в том, чтобы помещать некоторые в ту же lí nea. – Francisco Romero 29.12.2016, 17:28
  • 3
    я думаю, что формулировался плохо вопрос, я подумал, что ты хотел изменить стиль checkbox – hubman 29.12.2016, 17:28
  • 4
    @rn3w Я tambié n, в самом деле, я dí счет того, что он спрашивал действительно, увидев ответ aldanux. – Francisco Romero 29.12.2016, 17:29
  • 5
    @PavloB. - Я оставил тебе пример, как ты можешь изменять <label> – Black Sheep 29.12.2016, 17:32

В checkbox из-за sà - только не возможно менять ему фон.

Однако, ты можешь скрывать checkbox и использовать label, что estÃ: партнер в, чтобы симулировать checkbox. После того, как будем label, присоединенный сможем давать стили checkbox según события, которые у него будут checkbox в каждом моменте.

В этом случае, для состояния checkbox false label estarÃ: в красном, и когда состояние checkbox будет true, label estarÃ: в зелени.

input[type="checkbox"]{
  display: none;
}

input[type="checkbox"] + label{
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 5px;
}

input[type="checkbox"]:checked + label{
  background-color: green;
}
<input id="micb" type="checkbox">
<label class="milabel" for="micb"></label>
<span>Hola mundo! Soy clickable!</span>
3
ответ дан 24.11.2019, 11:49

Теги

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