Jak zmienić rozmiar przycisku opcji za pomocą CSS?

Czy istnieje sposób kontrolowania rozmiaru przycisku opcji w CSS?

Tak, powinieneś móc ustawić jego wysokość i szerokość, jak w przypadku każdego elementu. Jednak niektóre przeglądarki tak naprawdę nie uwzględniają tych właściwości.

To demo daje przegląd tego, co jest możliwe i jak jest wyświetlane w różnych przeglądarkach: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Jak zobaczysz, stylizacja przycisków radiowych nie jest łatwa :-D

Obejściem problemu jest użycie JavaScript i CSS do zastąpienia przycisków opcji i innych elementów formularza niestandardowymi obrazami:

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

Ten CSS wydaje się załatwiać sprawę:

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

Ustawienie obramowania na 0 wydaje się umożliwiać użytkownikowi zmianę rozmiaru przycisku i wyświetlanie go w przeglądarce w tym rozmiarze, np. powyższa wysokość: 2em wyrenderuje przycisk na dwukrotnej wysokości linii. Działa to również w przypadku pól wyboru ( input[type=checkbox]). Niektóre przeglądarki renderują się lepiej niż inne.

Z okienka działa w IE8 +, FF21 +, Chrome29 +.

Stare pytanie, ale teraz jest proste rozwiązanie, kompatybilne z większością przeglądarek, z którego można korzystać CSS3. Testowałem w IE, Firefox i Chrome i działa.

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

Zmień wartość 1.5, w tym przypadku przyrost o 50%, w zależności od potrzeb. Jeśli współczynnik jest bardzo wysoki, może to spowodować rozmycie przycisku opcji. Następny obraz przedstawia współczynnik 1,5.

Możesz kontrolować rozmiar przycisku radiowego za pomocą stylu css:

style = "height: 35px; width: 35px;"

To bezpośrednio kontroluje rozmiar przycisku radiowego.

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

Nie bezpośrednio. W rzeczywistości elementy formularzy są ogólnie problematyczne lub niemożliwe do określenia stylu przy użyciu samego CSS. najlepszym podejściem jest:

1. ukryj przycisk opcji za pomocą JavaScript.
2. Użyj javascript, aby dodać / wyświetlić HTML, który może być stylizowany tak, jak lubisz, np
3. Zdefiniuj reguły CSS dla wybranego stanu, które jest wyzwalane przez dodanie klasy „selected” do Twojego zakresu.
4. Na koniec napisz javascript, aby stan przycisku opcji reagował na kliknięcia zakresu i odwrotnie, aby zakres reagował na zmiany stanu przycisku opcji (gdy użytkownicy używają klawiatury w celu uzyskania dostępu do formularza). druga część może być trudna do uruchomienia we wszystkich przeglądarkach. Używam czegoś podobnego do poniższego (który również używa jQuery. Unikam też dodawania dodatkowych rozpiętości, stylizując i stosując klasę „wybraną” bezpośrednio do etykiet wejściowych).

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>

Zmiana rozmiaru domyślnego widżetu nie działa we wszystkich przeglądarkach, ale za pomocą JavaScript można tworzyć niestandardowe przyciski opcji. Jednym ze sposobów jest utworzenie ukrytych przycisków opcji, a następnie umieszczenie własnych obrazów na stronie. Kliknięcie tych obrazów zmienia obrazy (zastępuje kliknięty obraz obrazem z przyciskiem opcji w wybranym stanie i zastępuje inne obrazy przyciskami opcji w stanie niezaznaczonym) i wybiera nowy przycisk opcji.

Zresztą istnieje dokumentacja na ten temat. Na przykład przeczytaj to: Stylizowanie pól wyboru i przycisków radiowych za pomocą CSS i JavaScript .

Oto jedno podejście. Domyślnie przyciski opcji były około dwa razy większe niż etykiety.
(Zobacz kod CSS i HTML na końcu odpowiedzi)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (Fuzziness nie jest winą IE, test hostowany na 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>                

Bezpośrednio nie możesz tego zrobić. [Według mojej wiedzy].

Powinieneś użyć, imagesaby zastąpić przyciski opcji. Możesz sprawić, by działały w taki sam sposób, jak przyciski opcji w większości przypadków, i możesz je ustawić w dowolnym rozmiarze.

Działa to dobrze we wszystkich przeglądarkach:

(styl inline dla prostoty ...)

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

Rozmiar przycisku opcji i tekstu zmieni się wraz z rozmiarem czcionki etykiety.

Możesz również użyć właściwości transform z wymaganą wartością w skali:

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

wypróbuj ten kod ... może to być odpowiedź, której dokładnie szukasz

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>