⚈ Kuopassa.net

Lisää kirjoituksia netistä.

CSS-vinkki: monirivisen tekstikentän koon muuttamisen rajoittaminen

Kirjoitettiin
Päivitettiin 8. kesäkuuta 2014 kello 00.14

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.

Tagit: ,

Tietoa kirjoittajasta

Tsekkaa myös minkälaisia valokuvia teen: www.pjti.fi