Блог

Главная - Вопросы по программированию - пользовательская проверка в firefox

пользовательская проверка в firefox

#html #css #cross-browser

#HTML #css #кросс-браузерный

Вопрос:

У меня возникли реальные проблемы с этим,

он работает в большинстве браузеров (все еще тестируется), однако Firefox является реальной проблемой.

Флажок должен быть в виде круга и зеленой галочки / флажка внутри после проверки.

Однако в Firefox я получаю квадратную рамку и черную галочку 

 .regular-checkbox {
  display: inline-block;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  border: 1px solid #ccc;
}
.regular-checkbox input {
  opacity: 0;
  position: absolute;
}
.regular-checkbox:active,
.regular-checkbox:checked:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0);
}
.regular-checkbox:checked {
  background-color: #e9ecee;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0);
}
.regular-checkbox:checked:after {
  content: '2714';
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 3px;
  color: #19a73e;
}
.big-checkbox {
  padding: 18px;
}
.big-checkbox:checked:after {
  font-size: 37px;
  top: -7px;
  left: 10px;
}  
 <label for='product-45-45' class="active">
  <input type='checkbox' style="float: left" class='regular-checkbox big-checkbox ' checked='checked' id='product-45-45' name='product_id_page-0[45-45]' value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />

  <div class="accord-text">
    <strong>title</strong>
  </div>
</label>

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

1. я думаю, вам не хватает HTML-части

2. Упс, спасибо добавлено

3. извините, заснул прошлой ночью 1

4. это так, я могу заставить его работать. Спасибо

Ответ №1:

Этот код работал в каждом браузере одинаково.

HEAVY CHECK MARK ✔ — в Firefox выглядит по-другому, поэтому я меняю на CHECK MARK ✓ .

Лучший способ сделать это правильно — использовать шрифты значков, такие как FontAwesome.

Рабочая скрипка

HTML:

 <label for="checkbox">
  <div class="accord-text">
    <strong>title</strong>
  </div>
  <div class="mycheckbox">
    <input id="checkbox" class="regular-checkbox" type="checkbox" name="checkbox"/>
    <span class="newcheckbox"></span>
  </div>
</label>

CSS:

 .mycheckbox {
  display: inline-block;
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid gray;
  border-radius: 17px;
}

.mycheckbox > input[type="checkbox"] {
  opacity: 0;
}

.mycheckbox > .newcheckbox:before {
  content: '2713';
  opacity: 0;
  position: absolute;
  top: 3px;
  left: 2px;
  font-size: 15px;
  color: #19a73e;
  transition: ease 0.1s;
  -webkit-transition: ease 0.1s;
  -moz-transition: ease 0.1s;
  -ms-transition: ease 0.1s;
  -o-transition: ease 0.1s;
}

.mycheckbox > input[type="checkbox"]:checked ~ .newcheckbox:before {
   opacity: 1;
   top: 1px;
}

.accord-text {
  display: inline-block;
}

В следующий раз вам нужно отключить свой флажок и «создать» свой собственный.
Его работа каждый раз.