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

Question

Есть ли способ контролировать размер переключателя в CSS?

Answer 1

Да, вы должны иметь возможность установить его высоту и ширину, как с любым элементом.Однако некоторые браузеры не учитывают эти свойства на самом деле.

В этой демонстрации дается обзор того, что возможно и как оно отображается в различных браузерах.http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Как вы увидите, стиль радио-кнопки не прост: -D

Обходной путь - использовать javascript и css для замены переключателей и других элементов формы на пользовательские изображения:
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
...

Answer 2

Хотя это старый вопрос, у него было наибольшее количество голосов по этому вопросу. У меня есть другое решение, с которым я недавно столкнулся. Кажется, этот CSS делает свое дело.

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

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

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

Приветствие.

Answer 3

Старый вопрос, но теперь есть простое решение, совместимое с большинством браузеров, которое должно использовать 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.

Answer 4

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

style = "высота: 35 пикселей; ширина: 35 пикселей;"

Это напрямую контролирует размер переключателя.

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

Answer 5

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

1. скрыть переключатель с помощью JavaScript.
2. Используйте JavaScript для добавления / отображения HTML, который можно стилизовать так, как вам нравится, например.
3. Определение правил CSS для выбранного состояния, которое запускается добавлением класса «selected» к вашему диапазону.
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>

Answer 6

Вот один из подходов. По умолчанию переключатели были примерно в два раза больше ярлыков.
(см. 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>                

Answer 7

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

Answer 8

<!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>

Answer 9

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

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

Answer 10

Вы также можете использовать свойство transform с необходимым значением в масштабе:

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