Как изменить размер переключателя с помощью CSS?

хотя старый вопрос, его было больше всего голосов по данному вопросу. У меня есть еще одно решение, с которым я столкнулся недавно. Этот css, кажется, делает трюк.

    input[type=radio] {
    border: 0px;
    width: 100%;
    height: 2em;
}

установка границы в 0, кажется, позволяет пользователю изменять размер кнопки и иметь браузер отображать его в этом размере, например. вышеуказанная высота: 2em будет отображать кнопку в два раза выше высоты линии. Это также работает для флажков (input[type=checkbox]). Некоторые браузеры отображают лучше, чем другие.

из окна windows он работает в ie8+, ff21+, chrome29+.

Ура.

старый вопрос, но теперь есть простое решение, совместимое с большинством браузеров, который заключается в использовании CSS3. Я тестировал в IE, Firefox и Chrome, и это работает.

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

изменить значение 1.5, в этом случае инкремент 50% в размере, согласно вашим потребностям. Если коэффициент очень высок,он может размыть переключатель. На следующем рисунке показано соотношение 1,5.

изменение размера виджета по умолчанию не работает во всех браузерах, но вы можете сделать пользовательские переключатели с JavaScript. Одним из способов является создание скрытых переключателей, а затем разместить свои собственные изображения на странице. Щелчок по этим изображениям изменяет изображения (заменяет нажатое изображение изображением с переключателем в выбранном состоянии и заменяет другие изображения переключателями в невыбранном состоянии) и выбирает новый переключатель.

в любом случае, есть документация на эту тему. Например, прочитайте это:стиль флажки и переключатели с CSS и JavaScript.

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

1. скрыть переключатель с помощью javascript.
2. используйте javascript для добавления / отображения HTML, который может быть оформлен так, как вам нравится, например
3. определите правила css для выбранного состояния, которое запускается добавлением класса "selected" к yuor span.
4. наконец, напишите javascript, чтобы состояние переключателя реагировало чтобы щелкнуть по диапазону и, наоборот, чтобы получить диапазон для реагирования на изменения состояния переключателя (например, когда пользователи используют клавиатуру для доступа к форме). вторая часть этого может быть сложно получить для работы во всех браузерах. Я использую что-то вроде следующего (который также использует jQuery. Я также избегаю добавления дополнительных пролетов, стилизуя и применяя "выбранный" класс непосредственно к входным меткам).

javascript

var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
        if (this.checked) {
            select($(this).parent());
        }
    }).find("label").bind("click", function (event) { //mouse use
        select($(this));
    });

function select(el) {
    labels.removeClass("selected");
    el.addClass("selected");
}

html

<ul class="radioButtons">
    <li>
        <label for="employee1">
            employee1
            <input type="radio" id="employee1" name="employee" />
        </label>
    </li>
    <li>
        <label for="employee2">
            employee1
            <input type="radio" id="employee2" name="employee" />
        </label>
    </li>
</ul>

вы можете управлять размером переключателя с помощью стиля css:

style= " высота: 35px; ширина: 35px;"

это непосредственно управляет размером переключателя.

<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">

вот один подход. По умолчанию переключатели были примерно в два раза больше этикеток.
(см. CSS и HTML код в конце ответа)

---

Safari: 10.0.3

---

Chrome: 56.0.2924.87

---

Firefox: 50.1.0

---

Internet Explorer: 9 (нечеткость не ошибка IE, размещенный тест на netrenderer.com)

---

CSS:

.sortOptions > label {
    font-size:          8px;
}

.sortOptions > input[type=radio] {
    width:              10px;
    height:             10px;
}

HTML:

<div class="rightColumn">Answers
    <span class="sortOptions">
        <input type="radio" name="answerSortList" value="credate"/>
        <label for="credate">Creation</label>

        <input type="radio" name="answerSortList" value="lastact"/>
        <label for="lastact">Activity</label>

        <input type="radio" name="answerSortList" value="score"/>
        <label for="score">Score</label>

        <input type="radio" name="answerSortList" value="upvotes"/>
        <label for="upvotes">Up votes</label>

        <input type="radio" name="answerSortList" value="downvotes"/>
        <label for="downvotes">Down Votes</label>

        <input type="radio" name="answerSortList" value="accepted"/>
        <label for="downvotes">Accepted</label>

    </span>
</div>                

непосредственно вы не можете этого сделать. [Насколько мне известно].

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

вы также можете использовать свойство transform, с требуемым значением в масштабе:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}
  </style>
</head>
<body>

<div class="container">
  <h2>Form control: inline radio buttons</h2>
  <p>The form below contains three inline radio buttons:</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 1
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 2
    </label>
    <label class="radio-inline">
      <input type="radio" name="optradio">Option 3
    </label>
  </form>
</div>

</body>
</html>

Это прекрасно работает для меня во всех браузерах:

(встроенный стиль для простоты...)

<label style="font-size:16px;">
    <input style="height:1em; width:1em;" type="radio">
    <span>Button One</span>
</label>

размер как переключателя, так и текста будет меняться с размером шрифта метки.

попробуйте этот код... это может быть ans, что вы именно ищете

body, html{
  height: 100%;
  background: #222222;
}

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
}

h2 {
	color: #AAAAAA;
}

.container ul{
  list-style: none;
  margin: 0;
  padding: 0;
	overflow: auto;
}

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
	border-bottom: 1px solid #333;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
	color: #FFFFFF;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #FFFFFF;
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

<ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Male</label>
    
    <div class="check"></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Female</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Transgender</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>

<html>
    <head>
    </head>
    <body>

<style>
.redradio {border:5px black solid;border-radius:25px;width:25px;height:25px;background:red;float:left;}
.greenradio {border:5px black solid;border-radius:25px;width:29px;height:29px;background:green;float:left;}
.radiobuttons{float:left;clear:both;margin-bottom:10px;}
</style>
<script type="text/javascript">
<!--
function switchON(groupelement,groupvalue,buttonelement,buttonvalue) {
    var groupelements = document.getElementById(groupelement);
    var buttons = groupelements.getElementsByTagName("button");
    for (i=0;i<buttons.length;i++) {
        if (buttons[i].id.indexOf("_on") != -1) {
            buttons[i].style.display="none";
        } else {
            buttons[i].style.display="block";
        }
    }
    var buttonON = buttonelement + "_button_on";
    var buttonOFF = buttonelement + "_button_off";
    document.getElementById(buttonON).style.display="block";
    document.getElementById(buttonOFF).style.display="none";
    document.getElementById(groupvalue).value=buttonvalue;
}
// -->
</script>

<form>
    <h1>farbige Radiobutton</h1>
    <div id="button_group">
        <input type="hidden" name="button_value" id="button_value" value=""/>
        <span class="radiobuttons">
            <button type="button" value="OFF1" name="button1_button_off" id="button1_button_off" onclick="switchON('button_group','button_value','button1',this.value)" class="redradio"></button>
            <button type="button" value="ON1" name="button1_button_on" id="button1_button_on" style="display:none;" class="greenradio"></button>
            <label for="button1_button_on">&nbsp;&nbsp;Ich will eins</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF2" name="button2_button_off" id="button2_button_off" onclick="switchON('button_group','button_value','button2',this.value)" class="redradio"></button>
            <button type="button" value="ON2" name="button2_button_on" id="button2_button_on" style="display:none;" class="greenradio"></button>
            <label for="button2_button_on">&nbsp;&nbsp;Ich will zwei</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF3" name="button3_button_off" id="button3_button_off" onclick="switchON('button_group','button_value','button3',this.value)" class="redradio"></button>
            <button type="button" value="ON3" name="button3_button_on" id="button3_button_on" style="display:none;" class="greenradio"></button>
            <label for="button3_button_on">&nbsp;&nbsp;Ich will drei</label>
        </span><br/>
        <span class="radiobuttons">
            <button type="button" value="OFF4" name="button4_button_off" id="button4_button_off" onclick="switchON('button_group','button_value','button4',this.value)" class="redradio"></button>
            <button type="button" value="ON4" name="button4_button_on" id="button4_button_on" style="display:none;" class="greenradio"></button>
            <label for="button4_button_on">&nbsp;&nbsp;Ich will vier</label>
        </span>
    </div>
</form>

    </body>
</html>