Як змінити розмір перемикача за допомогою CSS?

Чи є спосіб контролювати розмір перемикача в CSS?

Так, ви повинні мати можливість встановити його висоту та ширину, як і для будь-якого елемента. Однак деякі браузери насправді не беруть до уваги ці властивості.

Ця демонстрація дає огляд того, що можливо і як це відображається в різних браузерах: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Як ви побачите, стилізувати перемикачі непросто :-D

Обхідним шляхом є використання JavaScript та CSS для заміни перемикачів та інших елементів форми на власні зображення:

• https://github.com/emblematiq/Niceforms
• https://web.archive.org/web/20161119112447/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Здається, цей css робить фокус:

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

Встановлення межі в 0, здається, дозволяє користувачеві змінити розмір кнопки і змусити браузер відтворити її в такому розмірі, наприклад. вищевказана висота: 2em відобразить кнопку на подвійній висоті рядка. Це також працює для прапорців ( input[type=checkbox]). Деякі браузери відображаються краще, ніж інші.

З вікна він працює в 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.

Ви можете керувати розміром перемикача за допомогою стилю css:

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

Це безпосередньо контролює розмір перемикача.

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

Не безпосередньо. Насправді елементи форми загалом або проблематично, або неможливо стилізувати, використовуючи лише CSS. найкращий підхід:

1. приховати перемикач за допомогою.
2. Використовуйте javascript для додавання / відображення HTML, який можна стилізувати як завгодно, наприклад
3. Визначте правила css для вибраного стану, який запускається додаванням класу "вибраний" до вашого періоду.
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>

Зміна розміру віджета за замовчуванням працює не у всіх браузерах, але ви можете створити власні перемикачі за допомогою JavaScript. Один із способів - створити приховані перемикачі, а потім розмістити власні зображення на своїй сторінці. Натискання цих зображень змінює зображення (замінює натиснуте зображення зображенням на перемикач у вибраному стані та замінює інші зображення перемикачами у не вибраному стані) та вибирає новий перемикач.

У будь-якому випадку, є документація на цю тему. Наприклад, прочитайте це: Стайлінг-прапорці та перемикачі з CSS та JavaScript .

Ось один із підходів. За замовчуванням перемикачі були приблизно вдвічі більшими за мітки.
(Див. 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для заміни перемикачів. Ви можете змусити їх функціонувати так само, як і перемикачі, в більшості випадків, і ви можете зробити їх будь-якого розміру, який хочете.

Ви також можете використовувати властивість перетворення з необхідним значенням у масштабі:

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

Для мене це прекрасно працює у всіх браузерах:

(вбудований стиль для простоти ...)

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

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

спробуйте цей код ... це може бути саме те, що ви саме шукали

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>