De standaard selectievakjes die in de meeste browsers worden weergegeven, zijn vrij klein en worden niet groter, zelfs niet wanneer een groter lettertype wordt gebruikt. Wat is de beste, browseronafhankelijke manier om grotere selectievakjes weer te geven?
Antwoord 1, autoriteit 100%
Als dit iemand kan helpen, hier is een eenvoudige CSS als startpunt. Verandert het in een eenvoudig afgerond vierkant dat groot genoeg is voor duimen met een wisselende achtergrondkleur.
input[type='checkbox'] {
-webkit-appearance:none;
width:30px;
height:30px;
background:white;
border-radius:5px;
border:2px solid #555;
}
input[type='checkbox']:checked {
background: #abd;
}<input type="checkbox" />Antwoord 2, autoriteit 37%
Eigenlijk is er een manier om ze groter te maken, selectievakjes net als al het andere (zelfs een iframe zoals een Facebook-knop).
Wikkel ze in een “ingezoomd” element:
.double {
zoom: 2;
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-moz-transform: scale(2);
transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}<div class="double">
<input type="checkbox" name="hello" value="1">
</div>Antwoord 3, autoriteit 17%
Probeer deze CSS
input[type=checkbox] {width:100px; height:100px;}
Antwoord 4, autoriteit 11%
Ik heb geprobeerd de paddingen marginte veranderen, evenals de widthen height, en vond uiteindelijk dat als je gewoon de schaal vergroot, het zal werken:
input[type=checkbox] {
transform: scale(1.5);
}
Antwoord 5, autoriteit 2%
Puur moderne 2020 alleen CSS-beslissing, zonder wazige schaling of onhandige transformatie. En met teek! =)
Werkt goed in Firefox en Chromium-gebaseerde browsers.
Dus je kunt je selectievakjes puur ADAPTIEFbepalen, gewoon door de font-sizevan het bovenliggende blok in te stellen en het zal met de tekst meegroeien!
input[type='checkbox'] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
vertical-align: middle;
outline: none;
font-size: inherit;
cursor: pointer;
width: 1.0em;
height: 1.0em;
background: white;
border-radius: 0.25em;
border: 0.125em solid #555;
position: relative;
}
input[type='checkbox']:checked {
background: #adf;
}
input[type='checkbox']:checked:after {
content: "✔";
position: absolute;
font-size: 90%;
left: 0.0625em;
top: -0.25em;
}<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>
<label for="check3" style="font-size:150%"><input type="checkbox" id="check3" checked="checked" /> bigger checkbox </label>Antwoord 6
Hier is een truc die in de meeste recente browsers (IE9+) werkt als een CSS-only oplossing die kan worden verbeterd met javascript om IE8 en lager te ondersteunen.
<div>
<input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
<label for="checkboxID"> </label>
</div>
Stijl het labelmet hoe u wilt dat het selectievakje eruitziet
#checkboxID
{
position: absolute fixed;
margin-right: 2000px;
right: 100%;
}
#checkboxID + label
{
/* unchecked state */
}
#checkboxID:checked + label
{
/* checked state */
}Voor javascript kunt u klassen aan het label toevoegen om de status weer te geven. Het zou ook verstandig zijn om de volgende functie te gebruiken:
$('label[for]').live('click', function(e){
$('#' + $(this).attr('for') ).click();
return false;
});
BEWERKEN om #checkboxIDstijlen aan te passen
Antwoord 7
Ik schrijf een phonegap-app en de selectievakjes variëren in grootte, uiterlijk, enzovoort.
Dus heb ik mijn eigen eenvoudige selectievakje gemaakt:
Eerst de HTML-code:
<span role="checkbox"/>
Vervolgens de CSS:
[role=checkbox]{
background-image: url(../img/checkbox_nc.png);
height: 15px;
width: 15px;
display: inline-block;
margin: 0 5px 0 5px;
cursor: pointer;
}
.checked[role=checkbox]{
background-image: url(../img/checkbox_c.png);
}
Om de status van het selectievakje te wijzigen, heb ik JQuery gebruikt:
CLICKEVENT='touchend';
function createCheckboxes()
{
$('[role=checkbox]').bind(CLICKEVENT,function()
{
$(this).toggleClass('checked');
});
}
Maar het kan gemakkelijk zonder…
Hopelijk kan het helpen!