Come modificare la dimensione del pulsante di opzione utilizzando CSS?

C'è un modo per controllare la dimensione del pulsante di opzione in CSS?

Sì, dovresti essere in grado di impostarne l'altezza e la larghezza, come con qualsiasi elemento. Tuttavia, alcuni browser non tengono realmente conto di queste proprietà.

Questa demo offre una panoramica di ciò che è possibile e di come viene visualizzato nei vari browser: https://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

Come vedrai, lo styling dei pulsanti radio non è facile MrGreen

Una soluzione alternativa consiste nell'usare JavaScript e CSS per sostituire i pulsanti di opzione e altri elementi del modulo con immagini personalizzate:

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

Questo CSS sembra fare il trucco:

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

L'impostazione del bordo su 0 sembra consentire all'utente di modificare la dimensione del pulsante e fare in modo che il browser lo visualizzi in quella dimensione, ad es. l'altezza sopra: 2em renderà il pulsante al doppio dell'altezza della linea. Questo funziona anche per le caselle di controllo ( input[type=checkbox]). Alcuni browser rendono meglio di altri.

Da una finestra di Windows funziona in IE8 +, FF21 +, Chrome29 +.

Vecchia domanda ma ora c'è una soluzione semplice, compatibile con la maggior parte dei browser, che è quella di usare CSS3. Ho provato in IE, Firefox e Chrome e funziona.

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

Modificare il valore 1.5, in questo caso un incremento del 50% delle dimensioni, in base alle proprie esigenze. Se il rapporto è molto alto, può sfocare il pulsante di opzione. L'immagine successiva mostra un rapporto di 1,5.

Puoi controllare la dimensione del pulsante di opzione con lo stile CSS:

style = "altezza: 35 px; larghezza: 35 px;"

Questo controlla direttamente la dimensione del pulsante di opzione.

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

Non direttamente. In effetti, gli elementi del modulo in generale sono problematici o impossibili da modellare usando solo i CSS. l'approccio migliore è:

1. nascondi il pulsante di opzione utilizzando javascript.
2. Usa javascript per aggiungere / visualizzare HTML che può essere stilizzato come preferisci, ad es
3. Definisci le regole CSS per uno stato selezionato, che viene attivato aggiungendo una classe "selezionata" al tuo intervallo.
4. Infine, scrivi javascript per fare in modo che lo stato del pulsante di opzione reagisca ai clic sullo span e, viceversa, per fare in modo che lo span reagisca ai cambiamenti nello stato del pulsante di opzione (per quando gli utenti utilizzano la tastiera per accedere al modulo). la seconda parte può essere complicata da far funzionare su tutti i browser. Uso qualcosa di simile al seguente (che usa anche jQuery. Evito di aggiungere anche intervalli extra applicando lo stile e applicando la classe "selezionata" direttamente alle etichette di input).

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>

Il ridimensionamento del widget predefinito non funziona in tutti i browser, ma puoi creare pulsanti di opzione personalizzati con JavaScript. Uno dei modi è creare pulsanti di opzione nascosti e quindi posizionare le tue immagini sulla tua pagina. Fare clic su queste immagini cambia le immagini (sostituisce l'immagine cliccata con un'immagine con un pulsante di opzione in uno stato selezionato e sostituisce le altre immagini con pulsanti di opzione in uno stato non selezionato) e seleziona il nuovo pulsante di opzione.

Comunque, c'è documentazione su questo argomento. Ad esempio, leggi questo: Applicazione di stili alle caselle di controllo e ai pulsanti di opzione con CSS e JavaScript .

Ecco un approccio. Per impostazione predefinita, i pulsanti di opzione erano circa due volte più grandi delle etichette.
(Vedi CSS e codice HTML alla fine della risposta)

Safari: 10.0.3

Chrome: 56.0.2924.87

Firefox: 50.1.0

Internet Explorer: 9 (La sfocatura non è colpa di IE, test ospitato su 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>                

Direttamente non puoi farlo. [Secondo la mia conoscenza].

Dovresti usare imagesper soppiantare i pulsanti di opzione. Puoi farli funzionare allo stesso modo dei pulsanti di opzione nella maggior parte dei casi e puoi renderli delle dimensioni che desideri.

È inoltre possibile utilizzare la proprietà di trasformazione, con il valore richiesto in scala:

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

Funziona bene per me in tutti i browser:

(stile inline per semplicità ...)

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

La dimensione sia del pulsante di opzione che del testo cambierà con la dimensione del carattere dell'etichetta.

prova questo codice ... potrebbe essere esattamente quello che stai cercando

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>