Почему флажок выглядит так?

Question

https://test.terminbuch.eu/massimo/termine

После того, как вы нажмете «Registrieren», справа вы увидите очень маленький флажок. Это не похоже на нормальный флажок. И это очень мало, хотя в инструментах разработчика нет правил для флажков.

Любые идеи?

Answer 1

добавить width:100px; в framework.css на номер строки 106 и название класса .checkbox-cb. это поможет вам.

вам необходимо изменить нижеперечисленный класс.

.checkbox-cb { 
    margin-right: 8px; 
    cursor: pointer; 
    width: 40px; 
} 

Answer 2

Это потому, что вы используете display: inline-flex на .checkbox класса. Укажите атрибут flex для элемента ввода флажка, и он будет работать:

.checkbox-cb { 
    margin-right: 8px; 
    cursor: pointer; 
    flex: 0 0 auto; 
} 

Answer 3

Это нормальный флажок. Это 13px x 13px в Firefox, который по умолчанию установлен в этом браузере. Я изолировал код ниже, так что вы можете играть с ним в разных браузерах:

.agbCheckbox { 
 
    height: 80px; 
 
    font-size: 11px; 
 
} 
 

 
.checkbox { 
 
    display: inline-flex; 
 
    align-items: center; 
 
    cursor: pointer; 
 
} 
 

 
.checkbox-cb { 
 
    margin-right: 8px; 
 
    cursor: pointer; 
 
}

<div class="agbCheckbox checkbox" id="77"> 
 
    <input class="checkbox-cb" id="77-cb" type="checkbox"> 
 
    <span class="checkbox-text" id="77-text">Den Inhalt der <a id="agbLink" href="">AGB und Datenschutzerklärung</a> habe ich zur Kenntnis genommen und erkläre mich damit einverstanden.</span> 
 
</div>

Если вы хотите изменить размер флажка только CSS есть хорошая тема здесь на SO : Checkbox size in HTML/CSS