Флажок ширина / высота не меняется для новых браузеров

Question

Я работаю над сайтом, который должен быть совместимым с Разделом 508, поэтому я подумал, что увеличение размера флажков было бы полезно для любого из слабовидящих, у которых все еще было некоторое зрение.Посмотрите на этот снимок экрана с Chrome 15 (по сравнению с Chrome 16):

Это тот же самый css, который выглядит так:

input[type="checkbox"] {
  width: 30px;
  height: 30px;
}

Как выМожно увидеть, что ширина и высота интерпретируются совершенно по-разному.Кто-нибудь знает, как заставить это работать с обоими браузерами?(IE9 делает то же самое справа).

Answer 1

На самом деле не существует кросс-браузерного решения (это старая статья, но все еще хорошая и актуальная), использующего фактический флажок.Есть трюки, которые вы можете использовать в CSS3.Тот, который я использую, не очень удобен для браузера (требуется более новый браузер), но есть и другие способы, которые немного более кроссбраузерны, но все же не на 100%.Я сомневаюсь, что вы найдете что-нибудь, что будет поддерживать IE6, например.

Примерно так:

input.checkbox { display: none }
input.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center }
input.checkbox:checked + label > span.checkbox-span { color: #000 }

<input type="checkbox" class="checkbox" id="check_1" />
<label for="check_1"><span class="checkbox-span">✓</span> Text describing checkbox #1</label>

Это очень простой пример. См. JsFiddle.