HTML/CSS: come posso aumentare le caselle di controllo durante l'ingrandimento e il restringimento durante lo zoom indietro?

Ho questo semplice codice per il test:HTML/CSS: come posso aumentare le caselle di controllo durante l'ingrandimento e il restringimento durante lo zoom indietro?

<html> 
<head> 
<style type="text/css"> 
    ul{ 
     float:left; 
     margin:0; 
     list-style:none; 
     padding:0; 
     } 
</style> 
    </head> 
<body> 
    <ul> 
     <li><input type="checkbox" id="c1" class="checkBox">a</li> 
     <li><input type="checkbox" id="c2" class="checkBox"/>b</li> 
     <li><input type="checkbox" id="c3" class="checkBox"/>c</li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" id="c4" class="checkBox"/>d</li> 
     <li><input type="checkbox" id="c5" class="checkBox"/>e</li> 
      <li><input type="checkbox" id="c6" class="checkBox" />f</li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" id="c7" class="checkBox"/>g</li> 
     <li><input type="checkbox" id="c8" class="checkBox"/>h</li> 
     <li><input type="checkbox" id="c9" class="checkBox"/>i</li> 
    </ul> 
</body> 
</html>

ecco il risultato:

enter image description here

ma se diminuire il testo diventa più piccolo, ma le caselle di controllo rimangono gli stessi

enter image description here

e se si ingrandisce il testo si ingrandisce ma rimangono le caselle di controllo lo stesso

enter image description here

è possibile fare in modo che le caselle di controllo cambierebbero la loro dimensione così? ad esempio proporzionalmente alla dimensione della loro etichetta? grazie in anticipo

fonte

2012-12-08 ksm001

Non si può fare questo e btw aver codificato la tua domanda del tutto a torto –

grazie per averlo notato, erano i tag che ho usato per una domanda volevo chiedere ma alla fine non l'ha mai fatto. – ksm001

Sì, non è possibile ridimensionare le caselle di controllo. Non puoi modificare le caselle di controllo. Sono resi dal sistema operativo. Conosco una soluzione: usa JS per nascondere le caselle di controllo, quindi crea un nuovo elemento html (span, div) e simula il comportamento. Quindi puoi modellare questo nuovo elemento con Media Queries. – marinbgd

jsFiddle DEMO

Usa CSS3 per ingrandire la lista pure come il browser reso caselle!

.extraLarge ul { 
    -moz-transform: scale(1.50); 
    -webkit-transform: scale(1.50); 
    -o-transform: scale(1.50); 
    transform: scale(1.50); 
    padding: 10px; 
}

fonte

2013-01-11 02:59:32 arttronics

Non sapevo nemmeno che fosse possibile. Roba buona :) – Tx3

Strettamente parlando, da solo, non risolve il problema descritto dall'OP: quando cambi lo zoom del browser, le caselle di controllo saranno ancora troppo piccole o troppo grandi, tranne che per lo zoom predefinito. –

È possibile farlo con CSS3 a utilizzando il: selettore selezionato. Ciò che fa è utilizzare un input con uno sfondo con un'immagine. Pertanto, quando si ingrandisce/rimpicciolisce, si ridimensiona, insieme al testo. Sfortunatamente, non funziona in IE9 e sotto.

CSS:

.theCheckbox input { 
    display: none; 
} 

.theCheckbox span { 
    width: 20px; 
    height: 20px; 
    display: block; 
    background: url("link_to_image"); 
} 

.theCheckbox input:checked + span { 
    background: url("link_to_checked_image"); 
}

HTML:

<label for="test">Label for checkbox</label> 
<label class="theCheckbox"> 
    <input type="checkbox" name="test"/> 
    <span></span> 
</label>

fonte

2013-01-11 02:12:28 DaKoder

[** jsFiddle DEMO **] (http://jsfiddle.net/uFu2y/) – arttronics

** + 1 ** Ottima risposta! – arttronics

Firefox ha un "solo testo-" caratteristica zoom, a differenza di Chrome che manca di questa caratteristica.

Per rendere tutto zoom in Firefox, rimuovere il segno di spunta e ripristinare il livello di zoom.

enter image description here

Per browser Chrome, esaminare i plugin Zoom che hanno questa caratteristica.

fonte

2013-01-11 05:29:38 arttronics

È possibile creare il proprio controllo casella di controllo, in modo da non fare affidamento sull'implementazione del sistema operativo nativo. Quando lo crei utilizzando elementi html comuni, lo zoom del browser funzionerà senza intoppi.

Ci sono un sacco di plugin esistenti per le librerie (come jQuery)

fonte

2013-01-11 20:35:17 Tx3

HTML/CSS: come posso aumentare le caselle di controllo durante l'ingrandimento e il restringimento durante lo zoom indietro?

risposta

Problemi correlati