Стилизуем чекбоксы и радиокнопки с css3
Содержание:
Видео
Видео в формате mp4 (слева) служит основой для анимации флажка (справа). Попробуйте другие видео или загрузите своё https://www.bryanbraun.com/checkboxland/docs/demos/video-test/
Вскоре я расширил API Checkboxland, чтобы можно было загружать любое видео (например, из giphy или gifer) и мгновенно генерировать версию с флажками. Анимация флажками стала тривиальной.
Это означает, что я могу отображать данные с веб-камеры, что привлекло много внимания в Twitter:
Наконец, мой коллега Рид рассказал мне о задаче, где люди пытаются воспроизвести анимационный ролик «Bad Apple» на разных непонятных вычислительных средах (см. кучу примеров здесь). Это прозвучало забавно, поэтому я пошёл и записал видео на Youtube.
Весь этот процесс был интересным, но мне действительно пора остановиться.
Я был ранен проектом прямо в голову, бросил из-за него всё. Конечно, это безобидное развлечение, но я начинаю чувствовать вину за то, что трачу месяцы на возню с этими вещами, когда у меня есть инструменты и навыки, чтобы выпустить нечто действительно полезное.
Я ощущаю себя Суперменом, использующим сверхспособности, чтобы поджарить яйцо. Если я продолжу в том же духе, то стану известен как «парень с галочкой». Это не слишком продаваемо, но, думаю, бывает ещё хуже.
К счастью, кажется, я начинаю исчерпывать все интересные идеи, которые мог бы сделать в этом формате. Иногда это выглядит как «чувак, мы поняли, ты можешь сделать что угодно с флажками».
У меня есть ешё несколько затянувшихся в реализации идей, хотя… быть может, это как управляемый лесной пожар, и я должен просто позволить себе продолжать делать это всё, пока идеи не перегорят сами собой.
Пока автор решает, что делать с идеями, вы можете начать изучение фронтенда или просто прочитать следующий материал.
Ещё примеры по кастомизации checkbox и label
В этом разделе представлены следующие примеры:
1. Стилизация checkbox, когда расположен в .
HTML разметка:
<label class="custom-checkbox"> <input type="checkbox" value="value-1"> <span>Indigo</span> </label>
CSS код:
/* для элемента input c type="checkbox" */
.custom-checkbox>input {
position: absolute;
z-index: -1;
opacity: 0;
}
/* для элемента label, связанного с .custom-checkbox */
.custom-checkbox>span {
display: inline-flex;
align-items: center;
user-select: none;
}
/* создание в label псевдоэлемента before со следующими стилями */
.custom-checkbox>span::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid #adb5bd;
border-radius: 0.25em;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
/* стили при наведении курсора на checkbox */
.custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before {
border-color: #b3d7ff;
}
/* стили для активного чекбокса (при нажатии на него) */
.custom-checkbox>input:not(:disabled):active+span::before {
background-color: #b3d7ff;
border-color: #b3d7ff;
}
/* стили для чекбокса, находящегося в фокусе */
.custom-checkbox>input:focus+span::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox>input:focus:not(:checked)+span::before {
border-color: #80bdff;
}
/* стили для чекбокса, находящегося в состоянии checked */
.custom-checkbox>input:checked+span::before {
border-color: #0b76ef;
background-color: #0b76ef;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox>input:disabled+span::before {
background-color: #e9ecef;
}
2. Стилизация , когда расположен в .
HTML разметка:
<label class="custom-radio"> <input type="radio" name="color" value="indigo"> <span>Indigo</span> </label>
CSS код:
/* для элемента input c type="radio" */
.custom-radio>input {
position: absolute;
z-index: -1;
opacity: 0;
}
/* для элемента label связанного с .custom-radio */
.custom-radio>span {
display: inline-flex;
align-items: center;
user-select: none;
}
/* создание в label псевдоэлемента before со следующими стилями */
.custom-radio>span::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid #adb5bd;
border-radius: 50%;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
/* стили при наведении курсора на радио */
.custom-radio>input:not(:disabled):not(:checked)+span:hover::before {
border-color: #b3d7ff;
}
/* стили для активной радиокнопки (при нажатии на неё) */
.custom-radio>input:not(:disabled):active+span::before {
background-color: #b3d7ff;
border-color: #b3d7ff;
}
/* стили для радиокнопки, находящейся в фокусе */
.custom-radio>input:focus+span::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.custom-radio>input:focus:not(:checked)+span::before {
border-color: #80bdff;
}
/* стили для радиокнопки, находящейся в состоянии checked */
.custom-radio>input:checked+span::before {
border-color: #0b76ef;
background-color: #0b76ef;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
/* стили для радиокнопки, находящейся в состоянии disabled */
.custom-radio>input:disabled+span::before {
background-color: #e9ecef;
}
All attributes of input
| Attribute name | Values | Notes |
|---|---|---|
| step | Specifies the interval between valid values in a number-based input. | |
| required | Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty. | |
| readonly | Disallows the user from editing the value of the input. | |
| placeholder | Specifies placeholder text in a text-based input. | |
| pattern | Specifies a regular expression against which to validate the value of the input. | |
| multiple | Allows the user to enter multiple values into a file upload or email input. | |
| min | Specifies a minimum value for number and date input fields. | |
| max | Specifies a maximum value for number and date input fields. | |
| list | Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field. | |
| height | Specifies the height of an image input. | |
| formtarget | Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image». | |
| formmethod | Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image». | |
| formenctype | Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image». | |
| formaction | Specifies the URL for form submission. Can only be used for type=»submit» and type=»image». | |
| form | Specifies a form to which the input field belongs. | |
| autofocus | Specifies that the input field should be in focus immediately upon page load. | |
| accesskey | Defines a keyboard shortcut for the element. | |
| autocomplete | Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields. | |
| border | Was used to specify a border on an input. Deprecated. Use CSS instead. | |
| checked | Specifies whether a checkbox or radio button form input should be checked by default. | |
| disabled | Disables the input field. | |
| maxlength | Specifies the maximum number of characters that can be entered in a text-type input. | |
| language | Was used to indicate the scripting language used for events triggered by the input. | |
| name | Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted. | |
| size | Specifies the width of the input in characters. | |
| src | Defines the source URL for an image input. | |
| type | buttoncheckboxfilehiddenimagepasswordradioresetsubmittext | Defines the input type. |
| value | Defines an initial value or default selection for an input field. |
Check / Uncheck all checkboxes
Sometimes, you may want to check and uncheck all checkboxes on a form. See the following example:
When you click the button with the id , all the checkboxes will be checked if they are not and unchecked if they are already checked.
First, develop a function that checks or unchecks all checkboxes based on an input argument:
When you click the button, you can call the function to select all checkboxes. Next time, when you click the button, it should uncheck all the checkboxes.
To do this switch, you need to reassign the click event handler whenever the click event fires.
The following select the button and attach a click event listener:
The function is as follows:
The function is:
How it works:
If you click the button, the function is invoked to check all checkboxes. Then, it reassigns the function to the event handler.
Next time, if you click the button, the function is invoked to uncheck all the checkboxes and reassign the function to the event handler.
Подход
Чекбоксы и радиокнопки в браузере по умолчанию теперь заменяются с помощью , цель которого – в улучшении их расположения и «поведения» их элементов HTML. Чекбоксы существуют для выбора одного или нескольких параметров из списка, а радиокнопки — одного.
Структурно наши и являются одноуровневыми элементами, в отличие от внутри . Это немного более сложно, так как вы должны указать и , чтобы связать и . Мы используем родственный селектор () для всех наших состояний , например: или . В сочетании с классом мы можем легко стилизовать текст для каждого элемента на основе состояния .
В наших проверках используются пользовательские значки Bootstrap для обозначения отмеченных или неопределенных состояний.
Примеры использования CheckBox
Пример 1
Отображение элемента управления CheckBox на пользовательской форме с параметрами, заданными в коде VBA Excel:
|
1 |
PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Нажмите на меня» .ControlSource=»A1″ .Value=False .Left=12 .Top=12 EndWith EndSub |
Размещается данная процедура в модуле пользовательской формы.
Если несколько элементов управления CheckBox привязать к одной ячейке, то при клике на одном из них, менять свое состояние будут и все остальные.
Пример 2
Смена надписи «Флажка» в зависимости от его состояния:
|
1 |
‘Устанавливаем первоначальные PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Поставьте галочку» .Value=False .TripleState=False EndWith EndSub ‘Меняем надпись «Флажка» при PrivateSubCheckBox1_Change() IfCheckBox1.Value Then CheckBox1.Caption=»Снимите галочку» Else CheckBox1.Caption=»Поставьте галочку» EndIf EndSub |
Пример 3
Скрытие и отображение, изменение доступности других элементов управления с помощью «Флажка».
Для реализации этого примера необходимо создать пользовательскую форму с четырьмя элементами управления: CheckBox1, TextBox1, TextBox2 и CommandButton1. А в модуле формы разместить следующий код:
|
1 |
‘Устанавливаем первоначальные PrivateSubUserForm_Initialize() WithCheckBox1 .Caption=»Хочу сложить два числа» .Value=False .TripleState=False EndWith WithTextBox1 .Enabled=False .Text=»Слагаемое 1″ EndWith WithTextBox2 .Enabled=False .Text=»Слагаемое 2″ EndWith WithCommandButton1 .Caption=»Сложить» .Visible=False EndWith EndSub ‘Меняем свойства других элементов PrivateSubCheckBox1_Change() IfCheckBox1.Value Then TextBox1.Enabled=True TextBox2.Enabled=True CommandButton1.Visible=True Else TextBox1.Enabled=False TextBox2.Enabled=False CommandButton1.Visible=False EndIf EndSub ‘Складываем два числа PrivateSubCommandButton1_Click() IfIsNumeric(TextBox1)AndIsNumeric(TextBox2)Then MsgBox TextBox1&» + «&TextBox2&» = «_ &CDbl(TextBox1)+CDbl(TextBox2) EndIf EndSub |
Форма открывается с недоступными для пользователя текстовыми полями и скрытой кнопкой «Сложить»:
После установки галочки на флажке текстовые поля становятся доступными для редактирования, и отображается кнопка «Сложить»:
Checking if a checkbox is checked
To get the state of a checkbox, whether checked or unchecked, you follow these steps:
- First, select the checkbox using the selecting DOM methods such as or .
- Then, access the property of the checkbox element. If its property is , then the checkbox is checked; otherwise, it is not.
Suppose that you have a checkbox like this:
To check if the checkbox is checked, you use the following code:
Additionally, you can use use the to check if the selector does not return Like this:
If a checkbox does not have the attribute, its default value is . For example:
If you get the attribute of a checkbox, you always get the string whether the checkbox is checked or not. For example:
See the following example:
Value
A representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the given to the data submitted with the checkbox’s . Take the following example:
In this example, we’ve got a name of , and a value of . When the form is submitted, the data name/value pair will be .
If the attribute was omitted, the default value for the checkbox is , so the submitted data in that case would be .
Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g. ); the value is not submitted to the server at all. If you wanted to submit a default value for the checkbox when it is unchecked, you could include an <input type=»hidden»> inside the form with the same and , generated by JavaScript perhaps.
Good labelling practices
You should always put the after the , and on the same line. There should usually be a space between the and the . You can accomplish this with a little bit of margin, or with simply a typographical space. The should always use attribute, which specifies that it is connected to the by . This is an important usability practice, as it allows the user to check and uncheck the box by clicking the label, not just the (too small) checkbox itself. This is even more critical today than it was in the past because of touchscreens — you want to give the user the easiest possible checkbox experience.
Yes! Do it this way.
No. This needs space between the box and the words.
No. The checkbox should come before the label.
No. The label needs to identify the checkbox.Do you like it this way? (Wrong.)
It’s amazing how much of a difference little details like that make to the way your user experiences and feels about your site. You want to make your users happy to use your forms, or at least not hate them. Proper form styling and usability go a long way to improving the overall satisfaction your users experience. For more information, see our tutorials on form styling and form usability.
Adam Wood
Создание стильного чекбокса
Процесс замены стандартного вида чекбокса на кастомный осуществим посредством выполнения следующей последовательности шагов.
Шаг 1. Создадим разметку.
<input type="checkbox" class="custom-checkbox" id="happy" name="happy" value="yes"> <label for="happy">Happy</label>
При создании разметки очень важно соблюдать последовательность расположения элементов. Это необходимо, потому что в зависимости от того, как они расположены мы будем составлять выражения для выбора элементов в CSS и назначать им стили
В этом примере элемент расположен после . Связь с осуществляется посредством соответствия значения элемента с элемента .
В примере к элементу добавлен класс . Данный класс мы будем использовать при составлении селекторов и тем самым с помощью него определять элементы к которым следует добавить стилизованный чекбокс вместо обычного. Т.е. его присутствие или отсутствие будет определять с каким чекбоксом (со стандартным или поддельным) будет выводится элемент с .
Шаг 2. Напишем стили для скрытия стандартного элемента .
.custom-checkbox {
position: absolute;
z-index: -1;
opacity: 0;
}
Мы не будем использовать , а установим ему стили, с помощью которых уберём его из потока (), поместим его ниже существующих элементов (), а также сделаем его полностью прозрачным (). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» или , когда он будет находиться в нём.
Шаг 3. Создадим поддельный чекбокс.
.custom-checkbox+label {
display: inline-flex;
align-items: center;
user-select: none;
}
.custom-checkbox+label::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid #adb5bd;
border-radius: 0.25em;
margin-right: 0.5em;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
Создание «поддельного» чекбокса выполним с помощью псевдоэлемента . Посредством CSS зададим ему размеры (в данном случае x), а затем нарисуем его с помощью . Свойства начинающие со слова будут определять положение самого флажка (когда будет в состоянии ).
Первое правило необходимо для вертикального центрирования флажка и надписи к нему. Это действие в примере выполнено через CSS Flexbox.
Шаг 4. Создадим стили при нахождении элемента в состоянии .
.custom-checkbox:checked+label::before {
border-color: #0b76ef;
background-color: #0b76ef;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
В этом коде при получении элементом состояния применим к псевдоэлементу находящемуся в стили, посредством которых установим цвет границы, цвет фону и фоновую картинку (флажок) в формате svg.
Шаг 5. Добавим код для стилизации чекбокса при нахождении его в состояниях , , и .
/* стили при наведении курсора на checkbox */
.custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
border-color: #b3d7ff;
}
/* стили для активного состояния чекбокса (при нажатии на него) */
.custom-checkbox:not(:disabled):active+label::before {
background-color: #b3d7ff;
border-color: #b3d7ff;
}
/* стили для чекбокса, находящегося в фокусе */
.custom-checkbox:focus+label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
.custom-checkbox:focus:not(:checked)+label::before {
border-color: #80bdff;
}
/* стили для чекбокса, находящегося в состоянии disabled */
.custom-checkbox:disabled+label::before {
background-color: #e9ecef;
}
Флажки (Checkbox)
Последнее обновление: 31.08.2017
Флажки представляют элементы управления, которые могут находиться в двух состояниях: отмеченном и неотмеченном.
Одиночный флажок может быть привязан к логическому значению true или false:
<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">` checked `</label>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
checked: true
}
});
</script>
По умолчанию для отмеченного состояния используется значение true, а для неотмеченного — false. Но вместо них можно
определить свои собственные значения для обоих состояний и между этими значениями переключаться:
<div id="app">
<input type="checkbox" v-model="light" v-bind:true-value="on" v-bind:false-value="off" />
<span v-if="light===on">Выключить</span>
<span v-else>Включить</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
on: true,
off:false,
light: true
}
});
</script>
Вместо значений true и false флажок привязывается к одному из свойств on или off. С помощью атрибута
отмеченное состояние будет сопоставляться со свойством on. Соответственно в неотмеченном состоянии флажок приобретает значение off. А само выбранное значение
попадает в свойство light.
Привязка к массиву
Также группа флажков может быть привязана к одному массиву. В этом случае при отметке флажка его значение попадает в массив:
<div id="app">
<input type="checkbox" value="Tom" v-model="selectedUsers">
<label>C#</label><br>
<input type="checkbox" value="Bob" v-model="selectedUsers">
<label>Bob</label><br>
<input type="checkbox" value="Sam" v-model="selectedUsers">
<label>Sam</label><br>
<input type="checkbox" value="Alice" v-model="selectedUsers">
<label>Alice</label><br>
<span>Выбрано: `selectedUsers`</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
selectedUsers:[]
}
});
</script>
В данном случае 4 флажка привязаны к массиву selectedUsers. Отметив определенный флажок, мы добавим его значение в массив.
Привязка к объекту
В примере выше значение каждого флажка представляло некоторую строку. Но также флажок может быть привязан к целому объекту. Для динамической привязки у
элемента html применяется атрибут v-bind:value:
<div id="app" class="col-md-4"> <template v-for="user in users"> <input type="checkbox" v-bind:value="user" v-model="selectedUsers"> <label>`user`.`name`</label><br> </template> <ul> <li v-for="user in selectedUsers">`user`.`name` - `user`.`age`</li> </ul> </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { users:, selectedUsers:[] } }); </script>
Здесь динамически для каждого объекта в массиве формируется флажок, а при выборе флажка объект попадет в массив selectedUsers.
НазадВперед
Картинка вместо чекбокса | htmlbook.ru
Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.
Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1).
Рис. 1. Вверху чекбокс выключен, внизу он включен
Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.
HTML
После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.
Первый это тег <label>, он создаёт вокруг чекбокса невидимую рамку, щелчок внутри которой включает или выключает галочку в чекбоксе. Его наличие позволяет не щёлкать непосредственно по чекбоксу, размеры которого довольно малы, а щёлкать за пределами чекбокса. При этом всё будет работать именно так, как нам и нужно, даже несмотря на то, что по самой галочке мы не попали.
Далее идёт сам чекбокс (<input type=»checkbox»>) со всеми желаемыми параметрами. Здесь никаких ограничений нет, вставляйте в тег любые необходимые атрибуты.
После <input> следует пустой <span>, этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.
CSS
Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label.
Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному»
Важно сделать чтобы элемент занимал всю доступную область внутри . Для этого задаём абсолютное позиционирование и устанавливаем ширину и высоту как 100% от родителя
Заодно смещаем элемент в левый верхний угол.
Картинка добавляется как фон, здесь никаких сюрпризов нет, и меняем для разнообразия форму курсора.
На этом этапе наш чекбокс уже превратился в симпатичную картинку, осталось только задать смену рисунка, когда внутри чекбокса стоит галочка. Для этого воспользуемся псевдоклассом :checked, он срабатывает при установке галочки в поле. Правда тут есть одна хитрость. :checked применяется к чекбоксу, а менять его стиль необходимости нет, нас интересует только «декоративный» span. Поэтому используем соседние селекторы и добавляем стиль к span идущему после чекбокса с галочкой.
Надеюсь, теперь стало понятно такое положение <span> в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked.
Собираем код воедино (пример 1) и тестируем его в браузерах.
Пример 1.
Картинка вместо чекбокса
HTML5CSS3IECrOpSaFx
Браузеры
Все современные версии браузеров — Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.
Также код не будет работать в IE8, эта версия не понимает :checked. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.
Чтобы в стилях затронуть версии IE младше 9.0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).
Пример 2. Стиль для IE8
Данный код надо вставить сразу после закрывающего тега </style> в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.
