Увеличение размера флажка в HTML

Ответ 1

Не в удобном кросс-браузере.

Вы получите максимальную гибкость, заменив его элементом управления, использующим JavaScript и CSS. Используйте стандартный флажок в качестве резервной копии.

В наши дни с псевдоселектором :checked вы также можете сделать элемент label, чтобы сделать это.

Ответ 2

В одном из способов я изменил размер флажка, масштабируя его с помощью CSS:

input[type=checkbox] {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}

Ответ 3

Это работает для меня.

<input type="checkbox" id="check" onclick="checked()" style="width:20px;height:20px;"/>

Ответ 4

Нет. Большинство браузеров игнорируют CSS-стиль ширины или высоты флажка. Существует два способа:

• Используйте тег label, чтобы щелчок по другому элементу также запускает текстовое поле.
• Сделайте свой собственный флажок с помощью Javascript, переключив изображение и заполнив скрытое поле ввода.

Ответ 5

Я много искал и, наконец, создал пользовательский флажок. Код

  <script type="text/javascript" src="jquery.js"></script>
       <script type="text/javascript">
     $(document).ready(function(){
    $(".CheckBoxClass").change(function(){
    if($(this).is(":checked")){
        $(this).next("label").addClass("LabelSelected");
    }else{
        $(this).next("label").removeClass("LabelSelected");
    }
});
          });
       </script>

Стиль

     .CheckBoxLabelClass{
    background: url("uncheck222.png") no-repeat;
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 10px;
    margin: 5px;
    height: 60px;   
    width: 60px;
    display: block;
}
.CheckBoxLabelClass:hover{
    text-decoration: underline;
}
.LabelSelected{
     background: url("check1111.png") no-repeat; 
    padding-left: 5px;
    padding-top: 3px;
    padding-right: 10px;
    margin: 5px;
    height: 60px;   
    width: 60px;
    display: block;

}

код флажка:

    <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
            <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass"></label>

Ответ 6

Фокус для увеличения размера HTML-флажка увеличивает свойство масштабирования ввода. Он совместим с кросс-браузером, а также будет регулировать размер в соответствии с разрешением устройства.

.daysCheckbox1{
zoom:1;

}
.daysCheckbox2{
zoom:1.5;

}
.daysCheckbox3{
zoom:2;

}
.daysCheckbox4{
zoom:2.5;

}

<label> Checkbox 1<input type="checkbox" class="daysCheckbox1"   name="Monday"></label><Br>
<label> Checkbox 2<input type="checkbox" class="daysCheckbox2"   name="Monday"></label><Br>
<label> Checkbox 3<input type="checkbox" class="daysCheckbox3"   name="Monday"></label><Br>
<label> Checkbox 4<input type="checkbox" class="daysCheckbox4"   name="Monday"></label><Br>

Ответ 7

U может создать пользовательский флажок с двумя изображениями, переключающимися друг с другом на tou

Ответ 8

Установите размер шрифта этого флажка примерно как 5em. Работал для меня.