⚈ Kuopassa.net

Lisää kertomuksia netistä. 摆烂

CSS-vinkki: monirivisen tekstikentän koon muuttamisen rajoittaminen

Monirivinen tekstikenttä, eli textarea-tagi, on viime aikoina useissa nettiselaimissa saanut sellaisen piirteen, että sen leveyttä ja korkeutta on voinut säätää kentän oikeassa alakulmassa sijaitsevasta kulmapalasta vetämällä. Sen voi estää useilla nettiselaimilla laittamalla CSS-merkkauksen jatkoksi onelinerin.

textarea { resize: none; }

Tuo ilmeisesti epävalidi keino tuntuu toimivan Windowsin Safarissa, Firefoxissa, Operassa, Chromessa ja Internet Explorerissa. Toimii ainakin noiden selainten uusilla versioilla. En tiedä vanhoista. Monirivistä tekstikenttää voi rajoittaa venymästä ja vanumasta alla olevin keinoin. resize-ominaisuudelle on olemassa vertikaalisen ja horisontaalisen eston lisäksi vaihtoehdot resize: horizontal;, joka sallii venyttämisen vaakatasossa, sekä resize: vertical;, joka antaa venyttää pystysuuntaisesti.

textarea {
max-width: 200px;
max-height: 200px;
min-width: 100px;
min-height: 100px;
}

En ole vielä tutustunut tähän asiaan niin perinpohjaisesti kuin mahdollista. Jos huomaat jotain korjattavaa esimerkeissäni, kommentoi tälle sivulle tai kirjoita palautetta.

Tietoa kirjoittajasta