Fare radio pulsante più grande?

C’è un modo per fare una radio pulsante più grande utilizzando i CSS?

Se non, come altro posso fare?

  • Che cosa stai cercando di fare qui? Può essere c’è una soluzione alternativa a questo…. Come emulare il Pulsante di opzione con le Immagini….
  • stackoverflow.com/questions/7727255/…
  • Domanda, hai collegato, non ha nulla a che fare con questo OP domanda. Qui, grandi pulsanti di opzione sono chiesto (soluzione è cambiare gli stili di input elemento), mentre collegate domanda OP chiede di più “cliccabile” aree (soluzione è cambiare label stili). Qui, al contrario, sono le risposte che si adatta alle OP la domanda posta questa domanda. Il più veloce a rispondere ((c) imanabidi) — “impostare la larghezza e l’altezza e l’utilizzo em metrica come : larghezza: 1.2 em; height: 1.2 em”.
  • stackoverflow.com/questions/4920281/…
InformationsquelleAutor Latox | 2010-12-23

 

7 Replies
  1. 61

    Provare questo codice:

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

    • per me funziona in chrome.
    • Radiobutton sembra meglio con la “trasformazione” di utilizzo “larghezza” e “altezza” ed è molto più semplice rispetto alle altre soluzioni.
    • Sì funziona, ma il risultato è brutto!
    • Effettivamente non sembra così male per me. Ho provato su IE 11, Chrome e FF e si guardarono bene. Grazie!
    • Risposta più completa: stackoverflow.com/a/45654519/196285
  2. 13

    Si può facilmente in grado di impostare altezza e larghezza, come con qualsiasi elemento.

    Qui è il violino con il codice

    JSFIDDLE GRANDE PULSANTE RADIO

    HTML

    <input id="r1" type="radio" name="group1" class="radio1" />
    <label for="r1">label 1 text</label>
    <input id="r2" type="radio" name="group1" class="radio2" />
    <label for="r2">label 2 text</label>
    <input id="r3" type="radio" name="group1" class="radio3" />
    <label for="r3">label 3 text</label>
    <input id="r4" type="radio" name="group1" class="radio4" />
    <label for="r4">label 4 text</label>

    CSS

    input[type=radio] {
        display: none;
    }
    input[type=radio] + label::before {
        content: '';
        display: inline-block;
        border: 1px solid #000;
        border-radius: 50%;
        margin: 0 0.5em;
    }
    input[type=radio]:checked + label::before {
        background-color: #ffa;
    }
    
    .radio1 + label::before {
        width: 0.5em;
        height: 0.5em;
    }
    
    .radio2 + label::before {
        width: 0.75em;
        height: 0.75em;
    }
    
    .radio3 + label::before {
        width: 1em;
        height: 1em;
    }
    
    .radio4 + label::before {
        width: 1.5em;
        height: 1.5em;
    }

    Styling pulsante di opzione non è facile.

    Gli elementi del modulo, in generale, sono sia problematico o impossibile, utilizzando CSS alone.

    Basta passare attraverso questo collegamento per il vostro stile con dimensioni più grandi e per i pulsanti di opzione..

    Anche un’occhiata a questo link…

    Grandi pulsanti di scelta

    • Questo è abbastanza intelligente, mi piace! Ha funzionato per me. Grazie!
    • Sempre il BENVENUTO 🙂
    • Ci sarebbe qualche modo per evitare di ferire l’usabilità? A quanto pare questo non funziona con la tastiera.
    • Piuttosto liscia! Bel lavoro.
  3. 1

    Provare questo:

    HTML

    <label>
       <input type="radio" value="1">
       <div></div>
    </label>

    CSS

    input[type="radio"] {
       display: none;
    }
    
    input[type="radio"] + div {
       height: 20px;
       width: 20px;
       display: inline-block;
       cursor: pointer;
       vertical-align: middle;
       background: #FFF;
       border: 1px solid #d2d2d2;
       border-radius: 100%;
    }
    
    input[type="radio"] + div:hover {
        border-color: #c2c2c2;
    }
    
    input[type="radio"]:checked + div {
        background:gray;
    }

    DEMO: http://jsfiddle.net/nuzhysgg/

  4. 0

    Ci potrebbe essere qualche eccentrico <span> trucchi all’interno di radio elementi, ma immagino che il loro utilizzo nei diversi browser sarebbe fastidioso per eseguire il debug.

    Ho usato questo script in passato, ma non di recente.

  5. 0

    Non utilizzare transform: scale(1.3), sembra davvero orribile. Basta usare questo:

    input[type='radio'] {
        height: 15px
        width: 15px;
        vertical-align: middle;
    }
    
    ...
    
    <input type="radio">Select this item

Lascia un commento