Jeg ønsker å deaktivere egenskapen for å endre størrelse på et "tekstområde".
For øyeblikket kan jeg endre størrelsen på et "tekstområde" ved å klikke på det nederste høyre hjørnet av "tekstområdet" og dra musen. Hvordan kan jeg deaktivere dette?
]1
Følgende CSS-regel deaktiverer størrelsesendring for textarea
-elementer:
textarea {
resize: none;
}
For å deaktivere det for noen (men ikke alle) textarea
, er det et par alternativer.
For å deaktivere et bestemt textarea
med name
-attributtet satt til foo
(dvs. <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Eller ved hjelp av et id
-attributt (dvs. <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
W3C-siden]3 viser mulige verdier for størrelsesbegrensninger: ingen, begge, horisontal, vertikal og arve:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Gjennomgå en anstendig kompatibilitetsside for å se hvilke nettlesere som for øyeblikket støtter denne funksjonen. Som Jon Hulka har kommentert, kan dimensjonene ytterligere begrenses i CSS ved hjelp av max-width, max-height, min-width og min-height.
Superviktig å vite:
Denne egenskapen gjør ingenting med mindre overflow-egenskapen er noe annet enn synlig, som er standard for de fleste elementer. Så generelt for å bruke dette, må du angi noe som overflow: scroll;
Sitat av Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
CSS 3 har en ny egenskap for brukergrensesnittelementer som lar deg gjøre dette. Egenskapen er resize property. Så du legger til følgende i stilarket ditt for å deaktivere endring av størrelse på alle tekstområdeelementer:
textarea { resize: none; }
Dette er en CSS&3 egenskap; bruk en kompatibilitetstabell for å se nettleserkompatibilitet.
Personlig ville jeg synes det var veldig irriterende å ha størrelsesendring deaktivert på tekstområdeelementer. Dette er en av de situasjonene der designeren prøver å "bryte" brukerens klient. Hvis designet ditt ikke har plass til et større tekstområde, kan det være lurt å revurdere hvordan designet ditt fungerer. Alle brukere kan legge til textarea { resize: both !important; }
i brukerens stilark for å overstyre dine preferanser.