Блог

Главная - Вопросы по программированию - Стиль чекбокса на основе CSS

Стиль чекбокса на основе CSS

#html #css

#HTML #css

Вопрос:

У меня есть флажок, который должен выглядеть как показано ниже,

введите описание изображения здесь

Если он не выбран, он должен быть таким, как показано ниже,

введите описание изображения здесь

У меня есть следующий css со мной 

 input[type="checkbox"]:checked   label::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 6px;
  background: rgba(0,0,0,0);
  top: 10px;
  left: 24px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type="checkbox"] {
  line-height: 2.1ex;
}

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   left: -999em;
}

input[type="checkbox"]   label {
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

input[type="checkbox"]   label::before {
  content: "";
  display: inline-block;
  vertical-align: -25%;
  height: 20px;
  width: 20px;
  background-color: #1BAAD3;
  border-radius: 4px;
  margin-right: 8px;
}

Когда я снимаю флажок, это то, что я вижу

введите описание изображения здесь

Я использую angular-js для обработки события выбора / отмены выбора

HTML 

 <div class="form-check">
   <input type="checkbox" ng-if="testKits" ng-model="testKits" class="form-check-input" id="testKits">
   <label class="form-check-label form-label-text source-sans-pro" for="testKits">{{'Testkits' | translate}}</label>
</div>

Комментарии:

1. Можете ли вы также поделиться html?

2. может быть, вам следует перейти background-color: #1BAAD3; на новый стиль для :checked состояния. т. е. input[type="checkbox"]:checked label::before { background-color: #1BAAD3; } и удалить его из старого стиля

3. @Hanif Я обновил сообщение

4. @zgood это сработало, добавьте это в ответ, я также добавил границу внутри input[type="checkbox"]:not(:checked) label::before { border:1px solid #E1E5EA; }

Ответ №1:

Пожалуйста, смотрите фрагмент ниже, он может сработать для вас:

 input[type="checkbox"]:checked   label::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 6px;
  background: rgba(0,0,0,0);
  top: 0px;
  left: 6px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type="checkbox"] {
  line-height: 2.1ex;
}

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   left: -999em;
}

input[type="checkbox"]   label {
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

input[type="checkbox"]   label::before {
  content: "";
  display: inline-block;
  vertical-align: -25%;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 4px;
  margin-right: 8px;
  border: 2px solid #ddd;
}
input[type="checkbox"]:checked   label::before {
  background-color: #1BAAD3;
  border: 2px solid #1BAAD3;
}  
 <div class="form-check">
   <input type="checkbox" class="form-check-input" id="testKits">
   <label class="form-check-label form-label-text source-sans-pro" for="testKits">abc</label>
</div>