Блог

После того, как я потратил некоторое время на то, чтобы выяснить, как мне создавать персонализированные флажки в форме html, я установил несколько хороших флажков для своей формы, чтобы они работали так, как должны в Google Chrome, однако в Mozilla их метки не совпадают с флажками (и в IE). Как это происходит?

Ниже css и html-код

и фотографии проблемы

и Mozilla

        <div class="field">
     
      <label>Type of Vecicle that you'd prefer</label>

      <div class="form-group row">
        
        <div class="col-sm-8 checkbox-wrapper">
         
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Standar Cars</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Bike</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Van</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label mozilla" for="severity_3">Luxury CarS</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
            <label class="form-check-label mozilla" for="severity_5">SUV</label>
          </div>
        </div>
      </div>

              </div>
  

и CSS

      input[type=checkbox] {
    position: relative;
      cursor: pointer;
      -moz-appearance:initial;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    border: 2px solid #2699FB;
    border-radius: 3px;
    background-color: white;
    -moz-appearance:initial;
}

input[type=checkbox]:hover:before {
    border:2px solid cyan;
    -moz-appearance:initial;
}

input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
    -moz-appearance:initial;
}

.form-check-label {
    position: relative;
    top:5px;
    left:5px;
    -moz-appearance:initial;

}
  

Вы можете использовать CSS Hack для решения этой проблемы.

• -moz для Firefox
• -ms для Internet Explorer
• -o для Opera <= 12

Пример Firefox:

 input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

input[type=checkbox]:before {
    content: "";
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    border: 2px solid #2699FB;
    border-radius: 3px;
    background-color: white;
}

input[type=checkbox]:hover:before {
    border:2px solid cyan;
}

input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
    left: 6px;
}

.form-check-label {
    position: relative;
    top:5px;
    left:5px;
}

@-moz-document url-prefix() {  
  input[type=checkbox] {
      -moz-appearance: initial;
      padding: 6px;
  }  

  .form-check-label {
      top:0px !important;
  }
}
  

Результат: