Kirjoittaja Aihe: Miten saisi html checkboxin suuremmaksi  (Luettu 872 kertaa)

teele

  • Käyttäjä
  • Viestejä: 528
    • Profiili
Miten saisi html checkboxin suuremmaksi
« : 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.

Koodia: [Valitse]

<?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.
« Viimeksi muokattu: 23.11.19 - klo:10.43 kirjoittanut teele »

AimoE

  • Käyttäjä
  • Viestejä: 1673
    • Profiili
Vs: Miten saisi html checkboxin suuremmaksi
« Vastaus #1 : 23.11.19 - klo:07.40 »
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
« Viimeksi muokattu: 23.11.19 - klo:07.57 kirjoittanut AimoE »

teele

  • Käyttäjä
  • Viestejä: 528
    • Profiili
Vs: Miten saisi html checkboxin suuremmaksi
« Vastaus #2 : 23.11.19 - klo:10.41 »
Linkin sivulla näyttää olevan hyvää tietoa asiasta, kestää vähän aikaa ennen, kuin ehdin sen opetella. Väliaikaisratkaisuna ehdin kokeilla tällaista

Koodia: [Valitse]
<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

Koodia: [Valitse]
   <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ä  :)
« Viimeksi muokattu: 23.11.19 - klo:10.45 kirjoittanut teele »