CSS: регулировка размера флажок

Question

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

Я уже пробовал, используя style="width:30px; height:50px;" подход, но это не сработало. Любые идеи? Возможно ли это?

Answer 1

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

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

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

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

Answer 2

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

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

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

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

<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>