Сделать радио кнопку больше? - PullRequest
Новая
       25

Сделать радио кнопку больше?

35 голосов
/ 23 декабря 2010

Можно ли как-нибудь увеличить переключатель с помощью CSS?

Если нет, то как еще я могу это сделать?

Ответы [ 6 ]

62 голосов
/ 14 октября 2015

Попробуйте этот код:

input[type='radio'] { transform: scale(2); }

13 голосов
/ 22 апреля 2014

Вы можете легко установить его высоту и ширину, как и для любого элемента.

Вот скрипка с кодом

JSFIDDLE BIG RADIO BUTTON

HTML 

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

CSS 

input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
    background-color: #ffa;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

Стилизация радио-кнопки не легка.

Элементы формы в целом либо проблематичны, либо их невозможно стилизовать с помощью CSS alone.

Просто пройдите по этой ссылке для вашего собственного стиля с увеличенным размером для переключателей ..

Также посмотрите на эту ссылку ...

Большие радиокнопки

2 голосов
/ 23 декабря 2010

Вы можете сделать это с помощью CSS, но браузер и ОС также влияют на это.Посмотрите на следующую статью.

Стилизация радио кнопок с помощью CSS

1 голос
/ 07 ноября 2014

Попробуйте:

HTML 

<label>
   <input type="radio" value="1">
   <div></div>
</label>

CSS 

input[type="radio"] {
   display: none;
}

input[type="radio"] + div {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;
}

input[type="radio"] + div:hover {
    border-color: #c2c2c2;
}

input[type="radio"]:checked + div {
    background:gray;
}

DEMO: http://jsfiddle.net/nuzhysgg/

0 голосов
/ 04 июня 2019

Не используйте transform: scale(1.3), это действительно выглядит ужасно.Просто используйте это: 

input[type='radio'] {
    height: 15px
    width: 15px;
    vertical-align: middle;
}

...

<input type="radio">Select this item
0 голосов
/ 23 декабря 2010

Могут быть некоторые изворотливые <span> трюки внутри радиоэлементов, но я думаю, что их использование в разных браузерах будет раздражать для отладки.

Я использовал этот скрипт в прошлом, но не в последнее время.

...