Hyubert
@Hyubert
JS

Как убрать этот баг в checbox?

1504680f53014acd884c274b8da268bf.png8d4c367cfe96471bb63bce9b53295316.png

если без текста то все нормально

codepen.io/anon/pen/PZrgLv

97e7e81427154dfcbcb09df0f7f0e014.png
<div class="brands">
                brands<br>
                    <input id='check_1' name='check' type='checkbox'>
                    <label class='check' for='check_1'>Apple<i class="fa"></i></label>
                    <input id='check_2' name='check' type='checkbox'>
                    <label class='check' for='check_2'>JBL<i class="fa"></i></label>
                    <input id='check_3' name='check' type='checkbox'>
                    <label class='check' for='check_3'>Bose<i class="fa"></i></label>
                    <input id='check_4' name='check' type='checkbox'>
                    <label class='check' for='check_4'>Nest<i class="fa"></i></label>
            </div>

.brands{
    border-radius: 5px;
    margin-top: 30px;
    background: #fff;
    width: 270px;
    font: 600 14px/30px 'Myriad Pro Regular', Arial;
    color: #3e425a;
    text-transform: uppercase;
    padding: 20px 25px;
}
.brands label{
    font: 600 14px/20px 'Myriad Pro Regular', Arial;
    color: #a1a7bd;
    text-transform: capitalize;
    
}
input[type='checkbox'] {
  display: none;
}
label.check {
  display: block;
  width: 25px;
  height: 25px;
  margin: 10px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
label.check {
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #ccc;
}
label.check .fa {
  display: block;
  width: 25px;
  height: 25px;
  background: url(http://savepic.net/7750571m.png) no-repeat 50% 50%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
input[type='checkbox']:checked + label {
  background: #00e2aa;
  box-shadow: none;
}
input[type='checkbox']:checked + label .fa {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}


19be1e0c384e47fd9601451e3d069dbc.png

Спасибо.
  • Вопрос задан
  • 190 просмотров
Решения вопроса 2
codepen.io/anon/pen/wMLbaa
попробуй ставить текст после иконки а дальше разберешься
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы