Ubuntu Suomen keskustelualueet
Ubuntun käyttö => Ohjelmointi, palvelimet ja muu edistyneempi käyttö => Aiheen aloitti: teele - 22.11.19 - klo:22.34
-
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.
-
Yksi keino on käyttää metristen (tai tuumamittojen) sijaan kirjaimiin suhteutettuja kokoja, siis esim. 1em on m-kirjaimen leveys ja 1en on n-kirjaimen leveys, 1ex on kirjainten korkeus ja 1rem on juurielementin kirjainkoko.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
-
Linkin sivulla näyttää olevan hyvää tietoa asiasta, kestää vähän aikaa ennen, kuin ehdin sen opetella. Väliaikaisratkaisuna ehdin kokeilla tällaista
<head>
<title> painosivu </title>
<style> input[type='text'] { font-size: 24px; }
input[type=checkbox] {transform: scale(2.5); }
input[type='submit'] { font-size: 24px; }
</style>
</head>
head-osassa ja sitten piti kirjasinkokoa isontaa body-osassa
<h1>
<input type="checkbox" name= "weight_check" > weight chrcked <br/>
</h1>
Mutta tämä ei varmaankaan ole mitenkään tyylikäs ja ehkä ei kovin toimivakaan ratkaisu, joten vielä kiitos siitä linkistä :)