Mikä olisi yksinkertaisin tapa suurentaa html checkboxin kokoa ja sen selitetekstiä html-sivulla mieluiten niin, että ei tarvitsisi erillistä css-tiedostoa.
Netistä löysin tällaisen, mutta tekstit jäävät pieniksi ja laatikot menenvät päällekkäin.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<title> stv-sivu </title>
<style> input[type='text'] { font-size: 24px; }</style>
<style> input[type='checkbox'] { transform: scale(1.9); }</style>
<style>
input[type=checkbox] {
width: 14mm;
-webkit-appearance: none;
-moz-appearance: none;
height: 14mm;
border: 0.1mm solid black;
}
input[type=checkbox]:checked {
background-color: lightblue;
}
input[type=checkbox]:checked:after {
margin-left: 4.3mm;
margin-top: -0.4mm;
width: 3mm;
height: 10mm;
border: solid white;
border-width: 0 2mm 2mm 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
content: "";
display: inline-block;
}
</style>
</head>
<body>
<label><input type="checkbox"> Test</label>
</body>
</html>
Sitten netistä löytyy sellaisia, jotka eivät toimi Firefoxissa, esimerkiksi zoom. Toinen ongelma on, että vaikka checkboxit näyttävät kohtuullisen kokoisilta omalla koneellani ilman mitään määrittelyjä, silloin ne ovat puhelimissa liian pieniä, vaikka teksti näkyy aika sopivan kokoisena puhelimessa.
Aihe: Miten saisi html checkboxin suuremmaksi (Luettu 2206 kertaa)
