CSS: настройка размера флажка

Question

Есть ли способ отрегулировать размер <input type="checkbox" />

Я уже пробовал использовать style="width:30px; height:50px;" подход, но он не работал. Есть идеи? Это вообще возможно?

Answer 1

Нет, я не думаю, что есть способ сделать это, используя только html / css.

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

Этот метод часто используется средами RIA, такими как QooxDoo,ExtJS и т. Д.

здесь вы найдете действительно хороший пример того, как использовать описанную технику.

Answer 2

Да, это возможно.

Вы можете изменить размер флажка с помощью функции scale свойства CSS transform , которое может увеличивать или уменьшать флажок.

Firefox 16.0+ и Internet Explorer 10.0+ поддерживают прямой вызов свойства transform, в то время как для старых версий и браузеров на основе Webkit (Chrome, Safari) требуются свои собственные префиксы ( для совместимости браузера ).

Простой пример:

<style type="text/css"> 
  input[type="checkbox"] {
    /* Double-sized Checkboxes */
    transform: scale(2);         /* FF 16+, IE 10+ */
    -webkit-transform: scale(2); /* Chrome, Safari 3.5+, Opera 15+ */

    -ms-transform: scale(2);     /* legacy: IE 9+ */
    -moz-transform: scale(2);    /* legacy: FF 3.5+ */
    -o-transform: scale(2);      /* legacy: Opera 10.5 */
  }
</style>

...

<form>
  <input type="checkbox" />
</form>