Сделать переключатель больше?

Ответ 1

см. эту ссылку может помочь вам

http://www.thecssninja.com/css/custom-inputs-using-css

Ответ 2

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

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

Ответ 3

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

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

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.

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

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

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

Ответ 4

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

Стилизация переключателей с помощью CSS

Ответ 5

Попробуйте следующее:

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/

Ответ 6

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

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

Ответ 7

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

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

...

<input type="radio">Select this item