Чистый CSS для радио и чекбоксов

Question

Чистый CSS для радио и чекбоксов

0

Из-за того, что мои радио и вкладки checkbox структурированы в html, я, похоже, не могу найти способ дать им очень простой пользовательский стиль.

Нажмите здесь для JSFiddle Может ли кто-нибудь посоветовать мне? как я могу дать своему радио и флажку собственный стильный стиль CSS? После некоторых исследований я заметил, что могу использовать http://www.csscheckbox.com/, но я не хочу использовать изображения.

Как мои входы структурированы? вход - это просто оболочка с меткой. Пример: <label><input name="checkbox" type="checkbox" value="OptionB" class="required">OptionB</label>

Niels 15 фев. 2014, в 17:55

Источник

0

Возможный дубликат Как оформить флажок с помощью CSS?
Matt Ball 15 фев. 2014, в 16:25

Теги:

javascript

html

css

forms

input

1 ответ

Ещё вопросы

Возможный дубликат Как оформить флажок с помощью CSS?

Niels · Answer 1 · 2014-02-15T14-15-00.000Z

Пожалуйста, смотрите здесь: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Это должно помочь:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background: green;
    border-radius: 10px;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background: blue;
}

HTML

<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

Если вы хотите использовать внутреннюю или внешнюю границу, вы можете использовать :before или после, чтобы создать дополнительный элемент для создания границы.

Могу ли я использовать icomoon.io для иконок?
Кроме того, вход находится внутри метки - ваш вариант не будет работать для меня, приятель
Вы также можете использовать span после флажка, используя input[type="checkbox"] + span и input[type="checkbox"]:checked + span