Я имею в виду, что сам переключатель состоит из круглой формы и точки в центре (когда кнопка выбрана). Я хочу изменить цвет обоих. Можно ли это сделать с помощью CSS?
Как изменить цвет переключателей?
Ответы (20)
Радиокнопка - это собственный элемент, специфичный для каждой ОС / браузера. Невозможно изменить его цвет / стиль, если вы не хотите реализовать пользовательские изображения или использовать пользовательскую библиотеку Javascript, которая включает изображения (например, this - кешированная ссылка)
Быстрое исправление - наложение стиля ввода радиокнопки с использованием :after
, однако, вероятно, лучше создать свой собственный набор инструментов.
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
Как упоминал Фред, нет возможности настроить переключатели в собственном стиле в отношении цвета, размера и т. Д. Но вы можете использовать псевдоэлементы CSS, чтобы настроить самозванец любого заданного переключателя и стилизовать его. Касаясь того, что сказал JamieD, о том, как мы можем использовать псевдоэлемент: after, вы можете использовать как: before, так и: after для достижения желаемого вида.
Преимущества такого подхода:
- Создайте стиль радиокнопки, а также включите метку для содержимого.
- Измените цвет внешнего обода и / или отмеченный кружок на любой цвет, который вам нравится.
- Придайте ему прозрачный вид, изменив свойство цвета фона и / или опционально используя свойство непрозрачности.
- Измените размер переключателя.
- При необходимости добавьте различные свойства тени, например вставку тени CSS.
- Смешайте этот простой трюк CSS / HTML с различными сетками, такими как Bootstrap 3.3.6, чтобы он визуально соответствовал остальным компонентам Bootstrap.
Пояснение к короткой демонстрации ниже:
- Настройте относительный встроенный блок для каждой радиокнопки
- Скрыть родное ощущение переключателя, нет возможности напрямую его стилизовать.
- Стиль и выравнивание метки
- Перестройка содержимого CSS на псевдоэлементе: before для выполнения двух задач - стилизовать внешний край радиокнопки и установить элемент, который будет отображаться первым (слева от содержимого метки). Вы можете узнать основные шаги по псевдоэлементам здесь - http://www.w3schools.com/css/css_pseudo_elements.asp
- Если этот переключатель установлен, после этого запросите метку для отображения содержимого CSS (стилизованная точка в переключателе).
HTML
<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>
CSS
.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #004c97;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #004c97;
}
короткая демонстрация, чтобы увидеть его в действии.
В заключение, никаких JavaScript, изображений или батареек не требуется. Чистый CSS.
Только если вы ориентируетесь на браузеры на основе webkit (Chrome и Safari, возможно, вы разрабатываете Chrome WebApp, кто знает ...), вы можете использовать следующее:
input[type='radio'] {
-webkit-appearance: none;
}
А затем стилизуйте его, как если бы это был простой элемент HTML, например, применив фоновое изображение.
Используйте input[type='radio']:active
, когда выбран вход, чтобы предоставить альтернативную графику
Обновление. Начиная с 2018 г. вы можете добавить следующее для поддержки нескольких поставщиков браузеров:
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
:active
вы должны использовать :checked
, чтобы различать стили между «выбранными» переключателями.
- person Daan; 04.08.2020
Вы можете настроить переключатели двумя способами на чистом CSS.
Путем удаления стандартного внешнего вида с помощью CSS
appearance
и применения настраиваемого внешнего вида. К сожалению, это не работает в IE для рабочего стола (но работает в IE для Windows Phone). Демо:input[type="radio"] { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ .flex { display: flex; align-items: center; }
<div class="flex"> <input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> </div> <div class="flex"> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label> </div>
С помощью скрытия радиокнопки и установки пользовательского внешнего вида радиокнопки на псевдоселектор
label
. Кстати, здесь нет необходимости в абсолютном позиционировании (я вижу абсолютное позиционирование в большинстве демонстраций). Демо:*, *:before, *:after { box-sizing: border-box; } input[type="radio"] { display: none; } input[type="radio"]+label:before { content: ""; /* create custom radiobutton appearance */ display: inline-block; width: 25px; height: 25px; padding: 6px; margin-right: 3px; /* background-color only for content */ background-clip: content-box; border: 2px solid #bbbbbb; background-color: #e7e6e7; border-radius: 50%; } /* appearance for checked radiobutton */ input[type="radio"]:checked + label:before { background-color: #93e026; } /* optional styles, I'm using this for centering radiobuttons */ label { display: flex; align-items: center; }
<input type="radio" name="radio" id="radio1" /> <label for="radio1">RadioButton1</label> <input type="radio" name="radio" id="radio2" /> <label for="radio2">RadioButton2</label> <input type="radio" name="radio" id="radio3" /> <label for="radio3">RadioButton3</label>
вы можете использовать взлом с флажком, как описано в трюках css
http://css-tricks.com/the-checkbox-hack/
рабочий пример радиокнопки:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}
Работает в IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome что угодно.
простой пример настраиваемой радиокнопки в кросс-браузере для вас
.checkbox input{
display: none;
}
.checkbox input:checked + label{
color: #16B67F;
}
.checkbox input:checked + label i{
background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
width: 15px;
height: 15px;
display: inline-block;
background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
background-size: 12px;
position: relative;
top: 1px;
left: -2px;
}
<div class="checkbox">
<input type="radio" name="sort" value="popularity" id="sort1">
<label for="sort1">
<i></i>
<span>first</span>
</label>
<input type="radio" name="sort" value="price" id="sort2">
<label for="sort2">
<i></i>
<span>second</span>
</label>
</div>
https://jsfiddle.net/kuzroman/ae1b34ay/
Что ж, для создания дополнительных элементов мы можем использовать: after,: before (так что нам не нужно сильно менять HTML). Затем для переключателей и флажков мы можем использовать: checked. Мы также можем использовать несколько других псевдоэлементов (например, hover). Используя их сочетание, мы можем создать несколько довольно крутых пользовательских форм. проверьте это
Я создал еще одну вилку образца кода @ klewis, чтобы продемонстрировать некоторую игру с чистым CSS и градиентами, используя: before /: after псевдоэлементы и скрытая радиокнопка ввода.
HTML:
sample radio buttons:
<div style="background:lightgrey;">
<span class="radio-item">
<input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
<label for="ritema">True</label>
</span>
<span class="radio-item">
<input type="radio" id="ritemb" name="ritem" class="false" value="ropt2">
<label for="ritemb">False</label>
</span>
</div>
:
CSS:
.radio-item input[type='radio'] {
visibility: hidden;
width: 20px;
height: 20px;
margin: 0 5px 0 5px;
padding: 0;
}
.radio-item input[type=radio]:before {
position: relative;
margin: 4px -25px -4px 0;
display: inline-block;
visibility: visible;
width: 20px;
height: 20px;
border-radius: 10px;
border: 2px inset rgba(150,150,150,0.75);
background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
content: "";
}
.radio-item input[type=radio]:checked:after {
position: relative;
top: 0;
left: 9px;
display: inline-block;
visibility: visible;
border-radius: 6px;
width: 12px;
height: 12px;
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
content: "";
}
.radio-item input[type=radio].true:checked:after {
background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
}
.radio-item input[type=radio].false:checked:after {
background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
}
.radio-item label {
display: inline-block;
height: 25px;
line-height: 25px;
margin: 0;
padding: 0;
}
предварительный просмотр: https://www.codeply.com/p/y47T4ylfib
Попробуйте этот css с переходом:
$DarkBrown: #292321;
$Orange: #CC3300;
div {
margin:0 0 0.75em 0;
}
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color: $DarkBrown;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
cursor:pointer;
-moz-border-radius: 50%;
border-radius: 50%;
}
input[type="radio"] + label span {
background-color:$DarkBrown;
}
input[type="radio"]:checked + label span{
background-color:$Orange;
}
input[type="radio"] + label span,
input[type="radio"]:checked + label span {
-webkit-transition:background-color 0.4s linear;
-o-transition:background-color 0.4s linear;
-moz-transition:background-color 0.4s linear;
transition:background-color 0.4s linear;
}
HTML:
<div>
<input type="radio" id="radio01" name="radio" />
<label for="radio01"><span></span>Radio Button 1</label>
</div>
<div>
<input type="radio" id="radio02" name="radio" />
<label for="radio02"><span></span>Radio Button 2</label>
</div>
Это невозможно с помощью собственного CSS. Вам придется использовать фоновые изображения и некоторые трюки с javascript.
Как уже говорилось, нет способа добиться этого во всех браузерах, поэтому лучший способ сделать это в кроссбраузере - ненавязчиво использовать javascript. По сути, вам нужно превратить радиокнопку в ссылки (полностью настраиваемые с помощью CSS). каждый щелчок по ссылке будет привязан к соответствующему радиобоксу, переключая его состояние и все остальные.
Для моего использования все, что я хотел сделать, это изменить цвет и ничего больше, поэтому я взял ответ от @klewis и изменил его на ...
- Сделайте радио таким же, как и в браузере по умолчанию (в моем случае Chrome), используя относительные% и em вместо фиксированных пикселей. Предостережение: em зависит от размера шрифта
input[type=radio]
, который может быть унаследован. Может потребоваться корректировка приведенных ниже значений. - Сохраните функции доступности (например, контур при фокусировке) исходного переключателя, не используя
display: none;
и применяя:before
и:after
к исходному переключателю вместо метки.
/* make default radio 'invisible' */
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* make new radio outer circle */
input[type=radio]:before {
content: " ";
display: inline-block;
position: relative;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
border: 1px solid grey;
background-color: transparent;
}
/* change colour of radio outer circle when checked */
input[type=radio]:checked:before {
border-color: green;
}
/* make new radio inner circle when checked */
input[type=radio]:checked:after {
content: " ";
display: block;
position: absolute;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
top: 0.4em;
left: 0.13em;
background: green;
}
`
Для тех, кто предпочитает начинать разработку с минимального примера, вот простой настраиваемый переключатель, который не зависит от label
:
[type="radio"] {
visibility: hidden; /* hide default radio button */
/* you may need to adjust margin here, too */
}
[type="radio"]::before { /* create pseudoelement */
border: 2px solid gray; /* thickness, style, color */
height: .9em; /* height adjusts with font */
width: .9em; /* width adjusts with font */
border-radius: 50%; /* make it round */
display: block; /* or flex or inline-block */
content: " "; /* won't display without this */
cursor: pointer; /* appears clickable to mouse users */
visibility: visible; /* reverse the 'hidden' above */
}
[type="radio"]:checked::before { /* selected */
/* add middle dot when selected */
/* slightly bigger second value makes it smooth */
/* even more (e.g., 20% 50%) would make it fuzzy */
background: radial-gradient(gray 36%, transparent 38%);
}
<br>
<input type="radio" name="example" id="one" value="one">
<label for="one">one</label>
<br>
<br>
<input type="radio" name="example" id="two" value="two">
<label for="two">two</label>
Попробуйте что-то вроде этого:
<html>
<head>
<style>
#yes{
border:2px solid white;
box-shadow:0 0 0 1px #392;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;
}
#yes:checked{
background-color:#392;
}
#no{
border:2px solid white;
box-shadow:0 0 0 1px #932;
appearance:none;
border-radius:50%;
width:12px;
height:12px;
background-color:#fff;
transition:all ease-in 0.2s;
}
#no:checked{
background-color:#932;
}
</style>
<body>
<input id="yes" type="radio" name="s"><label for="yes">Yes</label></br>
<input id="no" type="radio" name="s"><label for="no">No</label>
</body>
</html>
:before
, :after
and position
to reach the effect.
Может быть полезно привязать радиокнопку к стилизованной метке. Дополнительные сведения см. В этом ответе.
Умный способ сделать это - создать отдельный div с высотой и шириной, например, 50 пикселей, а затем с радиусом 50 пикселей положить его на ваши радиокнопки ...
Вы можете встроить элемент span в радио-вход, а затем выбрать цвет по вашему выбору, который будет отображаться, когда радио-вход отмечен. Взгляните на приведенный ниже пример, полученный от w3schools.
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
</style>
<body>
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
</body>
Changing the background color at this code segment below does the trick.
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #00a80e;
}
Источник из как создать настраиваемый переключатель
Если вы используете реагировать на загрузку Form.check, вы можете сделай что-нибудь вроде этого
HTML
<Form.Check
type="radio"
id="Radio-card"
label={`check me out`}
name="paymentmethod"
value="card"
/>
SCSS
.form-check {
display: flex;
align-items: center;
input[type="radio"] {
-moz-appearance: none;
appearance: none;
width: 11px;
height: 11px;
padding: 1px;
background-clip: content-box;
border: 1px solid hotpink;
background-color: white;
border-radius: 50%;
}
input[type="radio"]:checked {
outline: none;
background-color: hotpink;
border: 1px solid hotpink;
}
label {
font-size: 14px;
font-weight: 600;
}
}
Простое исправление - использовать следующее свойство CSS.
input[type=radio]:checked{
background: \*colour*\;
border-radius: 15px;
border: 4px solid #dfdfdf;
}
filter: grayscale(1);
для темно-серого или использоватьfilter: hue-rotate()
для других цветов, если вы не хотите создавать собственный элемент. - person 27px   schedule 16.11.2020