Radio css: Стилизация Radio Button

Содержание

Селектор CSS для проверенной метки переключателя с использованием JavaScript/jQuery

перейти к содержанию

В этом посте мы обсудим, как добавить селектор CSS для метки отмеченного переключателя или отмеченного флажка с помощью JavaScript и jQuery.

Чтобы применить стиль CSS к метке отмеченного переключателя или отмеченного флажка, вы можете использовать :checked Селектор псевдокласса CSS с соседний родственный комбинатор (+).

Селектор псевдокласса CSS :checked соответствует любой отмеченной/выбранной радиокнопке, флажку или элементу опции.
Смежный родственный комбинатор принимает два селектора, которые являются дочерними элементами одного и того же родителя, и соответствует второму элементу, если он идет сразу после первого элемента. Это синтаксис:

first_element + second_element { style }

1. Радиокнопка

Для радиокнопки вы можете использовать input[type="radio"]:checked + label селектор, который соответствует метке, следующей сразу за проверенным вводом типа радио.

CSS

input[type=»radio»]:checked + label {

font-weight: bold;

}

HTML

<p>Select your preferred contact method:</p>

<div>

<label for=»email»>Email</label>

<label for=»phone»>Phone</label>

</div>

Изменить в JSFiddle

2. Флажок

Для флажка вы можете использовать input[type="checkbox"]:checked + label селектор, который соответствует метке, которая следует сразу за проверенным вводом типа флажка.

CSS

input[type=»checkbox»]:checked + label {

font-weight: bold;

}

HTML

<p>Select your preferred contact method:</p>

<div>

<label for=»email»>Email</label>

</div>

<div>

<label for=»phone»>Phone</label>

</div>

Изменить в JSFiddle

В качестве альтернативы вы можете использовать :checked + label, который соответствует меткам переключателя и установленного флажка.

:checked + label {

font-weight: bold;

}

3. Выпадающий список

Для выпадающего списка вы можете использовать option:checked селектор, который соответствует выбранным элементам option.

CSS

option:checked {

font-weight: bold;

}

HTML

<label for=»contact»>Select your preferred contact method:</label>

<option value=»email»>Email</option>

<option value=»phone»>Phone</option>

</select>

Изменить в JSFiddle

Это все, что касается селектора CSS для проверенной метки переключателя с использованием JavaScript и Query.

Оценить этот пост

Средний рейтинг 3.84/5. Подсчет голосов: 58

Голосов пока нет! Будьте первым, кто оценит этот пост.

Сожалеем, что этот пост не оказался для вас полезным!

Расскажите, как мы можем улучшить этот пост?

Спасибо за чтение.

Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂

Красивые Radio Buttons (радио кнопка) и Checkbox (чекбокс)

Вам интересно узнать, как можно изменить стили флажков (checkbox css) и переключателей (radio кнопка), без JavaScript? Благодаря CSS3 это возможно!

Шаг 1: Общие сведения

Кто хоть немного знаком с CSS, тот возможно уже догадался, как мы будем реализовывать нашу задачу. С помощью данной функции:

input[type=»checkbox»]:checked + label {

}

Теперь, для тех, кто имеет не очень глубокие знания в это направлении – не бойтесь, читайте далее!

Что же мы будем делать? Используем CSS3 псевдо селектор :checked, выполняем проверку вкл/выкл.

Затем мы можем использовать “+” смежный селектор от CSS 2.1 сразу после checkbox флажка или радио кнопки, которое в нашем случае это label.

Шаг 2: Настройка нашего HTML кода

Мы начнем с создания HTML и CSS файлов (Вы же можете использовать свои стили, исходя из дизайна Вашего сайта). В данной статье будет продемонстрировано только создание чекбокса, так как радио кнопка имеет такой же принцип её стилизации и также есть в исходнике.

Хорошо, давайте начинать? А начнем мы с создания наших чекбокс input, после чего перейдем к label.

<label>Styled Check Box</label>

Теперь, только в случае, если вы не знаете много о , Вы должны подключить input и label для того, чтобы вам манипулировать тегом input через label. Это можно сделать, используя for=”» и id=”».

<label for=»c1″>Check Box 1</label>

Я также добавлю внутри label, но это более личное предпочтение, но далее Вы поймете зачем он нужен.

Шаг 3: CSS стили

Именно здесь начинается самое интересное. Первое, что необходимо сделать – это скрыть стандартный чекбокс флажок (и это является основой данной статьи).

Стили checkbox.

input[type=»checkbox»] {

display:none;

}

Теперь, когда это сделано, мы можем стилизовать label, но более конкретно span внутри label. Я делаю это таким образом, чтобы сделать положение флажка более точным. Без нее вы бы, вероятно, использовали фоновое изображение для label непосредственно, но таким способом точно его позиционировать сложно.

input[type=»checkbox»] {

display:none;

}

input[type=»checkbox»] + label span {

display:inline-block;

width:19px;

height:19px;

background:url(check_radio_sheet. png) left top no-repeat;

}

Позвольте мне коротко объяснить это. Прежде всего, обратите внимание на фон. У меня есть маленький спрайт, так что все, что нужно сделать, это установить фон позиции по span.

Вот остальная часть CSS, специфичные для моего стиля. Это чисто для эстетики.

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:url(check_radio_sheet.png) left top no-repeat;

cursor:pointer;

}

Шаг 4: Как заставить это работать?

Так, осталось совсем немного . Последнее, что нужно сделать, это определить состоянии элемента при входе, и, возможно, также при наведении курсора мыши.

Это довольно просто!

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:url(check_radio_sheet.png) left top no-repeat;

cursor:pointer;

}

input[type=»checkbox»]:checked + label span {

background:url(check_radio_sheet.png) -19px top no-repeat;

}

Обратите внимание, что, поскольку я использовал спрайт листа, все, что мне нужно сделать, это изменить позиционирование фона.

Поддержка браузеров

Псевдо-селекторы поддерживаются во всех браузерах, кроме IE – он не поддерживает. Вы не использовать :checked в IE9 и ниже, но его использование более практично.

Поддерживают ли мобильные браузеры – неясно. Mobile Safari Pre IOS 6 не поддерживает его.

Заключение

Спасибо за внимание! Возникнут трудности – пишите в комментариях!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://webdesign.tutsplus.com
Перевел: Владислав Бондаренко

Чтобы иметь возможность добавлять материал в закладки своего личного кабинета, Вам необходимо авторизоваться илизарегистрироваться.

google chrome — css input[type=radio] не будет работать в IE 11

Задавать вопрос

спросил 2 года 3 месяца назад

Изменено 2 года, 3 месяца назад

Просмотрено 566 раз

У меня есть радиокнопка, сделанная на заказ, зеленого цвета. все хорошо работает и на хроме и на IE11, кроме цвета. В хроме цвет зеленый, как и планировалось, а в IE11 цвет черный.

Я прикрепил сюда css и HTML. вот мой HTML:

 
                            Кицва
                            <тип ввода = "радио" />
                        
                        <дел>
                            Итра
                            <тип ввода = "радио" />

css:

 /*РЕДАКТИРОВАТЬ ПЕРЕКЛЮЧАТЕЛИ*/
    /* Когда переключатель установлен, добавляем зеленый фон */
    ввод [тип = радио] {
        -webkit-внешний вид: нет;
        -моз-внешний вид: нет;
        внешний вид: нет;
        радиус границы: 50%;
        ширина: 16 пикселей;
        высота: 16 пикселей;
        граница: 2px сплошная #999;
        переход: 0,2 с, все линейно;
        поле справа: 5px;
        положение: родственник;
        верх: 4px;
    }
        ввод [тип = радио]: отмечен {
            граница: 6px сплошная #008053;
        }
    ввод [тип = "радио"]: фокус {
        контур: 0px;
    }

Экран печати прилагается: IE11: IE11 — проверено, IE11 — не проверено Chrome: Chrome — проверено, Chrome — не проверено

Большое спасибо за поддержку.

css
google-chrome
radio-button
internet-explorer-11

Чтобы применить аналогичный эффект к переключателю в браузере IE 11 CSS, я предлагаю вам добавить приведенный ниже код в приведенный выше -упомянутый код.

 ввод[тип="радио"]:проверено::-ms-check
{
        граница: 6px сплошная #008053;
        белый цвет;
}

Полностью модифицированный код:

 

   <голова>
      демонстрация
      <стиль>
         /*РЕДАКТИРОВАТЬ ПЕРЕКЛЮЧАТЕЛИ*/
         /* Когда переключатель установлен, добавляем зеленый фон */
         ввод [тип = радио] {
         -webkit-внешний вид: нет;
         -моз-внешний вид: нет;
         внешний вид: нет;
         радиус границы: 50%;
         ширина: 16 пикселей;
         высота: 16 пикселей;
         граница: 2px сплошная #999;
         переход: 0,2 с, все линейно;
         поле справа: 5px;
         положение: родственник;
         верх: 4px;
         }
         ввод [тип = "радио"]: отмечен {
         граница: 6px сплошная #008053;
         }
         input[type="radio"]:checked::-ms-check {
         граница: 6px сплошная #008053;
         белый цвет;
         }
         ввод [тип = "радио"]: фокус {
         контур: 0px;
         }
      
   
   <тело>
      <дел>
         Кицва
         <тип ввода = "радио" />

Селектор CSS для проверенной метки переключателя с использованием JavaScript/jQuery

1. Радиокнопка

CSS

HTML

2. Флажок

CSS

HTML

3. Выпадающий список

CSS

HTML

Красивые Radio Buttons (радио кнопка) и Checkbox (чекбокс)

Шаг 1: Общие сведения

Шаг 2: Настройка нашего HTML кода

Шаг 3: CSS стили

Шаг 4: Как заставить это работать?

Поддержка браузеров

Заключение

google chrome — css input[type=radio] не будет работать в IE 11

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

html — Как управлять другим элементом, когда переключатель установлен на css?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Добавить комментарий Отменить ответ

Рубрики

Рубрики