CSS добился флажков и стилей радио, чтобы настроить

внешний интерфейс Firefox CSS jQuery

предисловие

Настройка стиля флажка и радио очень распространена на веб-страницах, например, выбор пола при вводе формы, а также выбор пользователями прочтения пользовательского соглашения при регистрации. Поскольку пользователи предъявляют все более высокие требования к опыту работы с продуктом, мы изменим дизайн флажка и переключателя. Стиль флажка по умолчанию очень уродлив, а стиль флажка и переключателя нельзя изменить напрямую. Здесь мы используем тег метки, чтобы украсить Это.

Сначала посмотрите на диаграмму эффекта реализации, как показано ниже:

Реализовать идеи

1. Установите атрибут ввода hidden, чтобы скрыть ввод, или вы также можете использовать display:none

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

2. Используйте метку для метки, чтобы связать ввод через идентификатор, чтобы при нажатии на метку ввод фактически щелкался.

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
			    <label for="adviceRadio1" class="advice"></label>

3. Определите стиль этикетки и установите фоновое изображение неовышенного состояния

.advice{
					height: 12px;
			        width: 12px;
				    display: inline-block;
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
			        background-repeat: no-repeat;
			        background-position: center;
			        vertical-align: middle;
			    	margin-top: -4px;
				}

4. Используйте соседний селектор, чтобы установить стиль выбранной государственной этикетки

input[type="radio"]:checked + .advice{
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
				}

код реализации

请选择反馈的问题：
			<label>
		    	<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
			    <label for="adviceRadio1" class="advice"></label>
			    <span class="radio-name">问题</span>
		    </label>
		    <label>
		    	<input type="radio" name="type" id="adviceRadio2" value="2" hidden/>
			    <label for="adviceRadio2" class="advice"></label>
			    <span class="radio-name">建议</span>
		    </label>
		    <span id="result">1</span>
		    <style type="text/css">
		    	.advice{
					height: 12px;
			        width: 12px;
				    display: inline-block;
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
			        background-repeat: no-repeat;
			        background-position: center;
			        vertical-align: middle;
			    	margin-top: -4px;
				}
				input[type="radio"]:checked + .advice{
				    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
				}
		    </style>

Выше приведен код реализации радиоблока, и флажок аналогичен Просто укажите тип ввода как флажок.

Получить значение, выбранное радио и флажком

1. Получите ценность радио Есть 3 способа получить значение радио с помощью jquery:

$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

2. Получите значение флажка

 var obj = document.getElementsByName("hobby");
		         var check_val = [];
		         for(k in obj){
		         	if(obj[k].checked){
		         		check_val.push(obj[k].value);
		         	}
		         }

яма столкнулась

Когда я впервые написал его, я использовал псевдоэлементы для его реализации, сначала скрывая ввод, а затем устанавливая input:after, чтобы определить его стиль.Код выглядит следующим образом:

//html
<input type="radio" name="sex" id="male" /><label for="male"> Male</label>

//css
input[type=radio]{
            visibility: hidden;
        }
        input[type=radio]:checked::after{
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -59px -10px;
            visibility: visible;
        }
        input[type=radio]::after{
            content: ' ';
            display: block;
            height: 20px;
            width: 20px;
            background-image: url('./img/sprite.png');
            background-repeat: no-repeat;
            background-position: -24px -10px;
            visibility: visible;
        }

Однако позже выяснилось, что в этом пути была проблема с совместимостью, и он не мог отображаться в браузере firefox.Данные были проверены, потому что ввод не поддерживает псевдоэлементы :after,:before . Firefox не может вставлять элементы DOM содержимого, псевдоэлементы отображаются внутри контейнера. input не может содержать другие элементы, поэтому он не поддерживает псевдоэлементы. Такие элементы, как input, img, iframe и т. д., не могут содержать другие элементы, поэтому контент нельзя вставлять через псевдоэлементы. Что касается галочки и радио можно в Хроме вставить, то это должно быть багом Ввод должен взаимодействовать с другими элементами контейнера (i, span) для достижения ожидаемого эффекта.

Ткните меня, чтобы посмотреть демо онлайн

Я загрузил полный код вGitHub.com/Buddha Zero/Гибискус, ох ты…, вы можете нажать, чтобы посмотреть, если вы думаете, что это неплохо, не забудьте поставить звездочку!

Релевантная информация

https://www.cnblogs.com/u-drive/p/7888155.html https://fatesinger.com/74438

Добавить Автора Отказ от ответственности: Оригинал статьи, пожалуйста, указывайте источник для перепечатки, спасибо!Блог Woo Woo.cn на.com/fo zero/afraid/89…
Теги: радио, чекбокс, украшение

Категории