Есть ли способ контролировать размер переключателя в CSS?
Как изменить размер кнопки с помощью CSS?
Ответ 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/
...
Ответ 2
Хотя старый вопрос, у него было больше всего голосов по этому вопросу. У меня есть другое решение, с которым я столкнулся недавно. Кажется, этот css делает трюк.
input[type=radio] {
border: 0px;
width: 100%;
height: 2em;
}
Настройка границы на 0, по-видимому, позволяет пользователю изменять размер кнопки и отображать браузер таким образом, например. высота выше: 2em будет отображать кнопку в два раза выше высоты строки. Это также работает для флажков (input [type = checkbox]). Некоторые браузеры выглядят лучше других.
В окне окна он работает в ie8 +, ff21 +, chrome29 +.
Приветствия.
Ответ 3
Изменение размера виджета по умолчанию не работает во всех браузерах, но вы можете создавать пользовательские переключатели с помощью JavaScript. Один из способов - создать скрытые радиокнопки, а затем разместить свои собственные изображения на своей странице. Нажатие на эти изображения изменяет изображения (заменяет щелкнутое изображение изображением с радиокнопкой в выбранном состоянии и заменяет другие изображения радиокнопками в невыбранном состоянии) и выбирает новый переключатель.
Во всяком случае, есть документация по этому вопросу. Например, прочитайте следующее: Флажки для стилизации и радио кнопки с CSS и JavaScript.
Ответ 4
Не напрямую. Фактически, элементы формы вообще либо проблематичны, либо невозможны для стиля, используя только CSS. наилучшим подходом является:
- Скрыть переключатель с помощью javascript.
- Использовать javascript для добавления/отображения HTML, который можно стилизовать так, как вам нравится.
- Определить правила css для выбранного состояния, которое запускается добавлением класса "selected" в диапазон yuor.
- Наконец, напишите 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>
Ответ 5
Вы можете управлять размером кнопки радио с помощью стиля css:
style = "height: 35px; width: 35px;"
Это напрямую контролирует размер кнопки.
<input type="radio" name="radio" value="value" style="height:35px; width:35px; vertical-align: middle;">
Ответ 6
Старый вопрос, но теперь есть простое решение, совместимое с большинством браузеров, которое должно использовать 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.
Ответ 7
Непосредственно вы не можете этого сделать. [Согласно моим знаниям].
Вы должны использовать images для вытеснения переключателей. Вы можете сделать так, чтобы они функционировали так же, как и переключатели в большинстве случаев, и вы можете сделать их любого размера, который вы хотите.
Ответ 8
Здесь один подход. По умолчанию переключатели примерно в два раза больше, чем метки.
(См. Код CSS и HTML в конце ответа)
Safari: 10.0.3
Chrome: 56.0.2924.87
Firefox: 50.1.0
Internet Explorer: 9 (Fuzziness не ошибка 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>
Ответ 9
Вы также можете использовать свойство transform с требуемым значением в масштабе:
input[type=radio]{transform:scale(2);}
Ответ 10
Это отлично работает для меня во всех браузерах:
(встроенный стиль для простоты...)
<label style="font-size:16px;">
<input style="height:1em; width:1em;" type="radio">
<span>Button One</span>
</label>
Размер как переключателя, так и текста будет изменяться с помощью размера шрифта метки.
Ответ 11
попробуйте этот код... это может быть то, что вы точно ищете
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>Ответ 12
<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"> 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"> 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"> 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"> Ich will vier</label>
</span>
</div>
</form>
</body>
</html>