Následující pravidlo CSS zakazuje změnu velikosti prvků textarea
:
textarea {
resize: none;
}
Pro vypnutí pro některé (ale ne všechny) textarea
existuje několik možností.
Zakázat konkrétní textarea
s atributem name
nastaveným na foo
(tj. <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Nebo pomocí atributu id
(tj. <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
Na stránce W3C jsou uvedeny možné hodnoty pro omezení velikosti: žádné, obě, horizontální, vertikální a dědit:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Projděte si slušnou stránku kompatibility a zjistěte, které prohlížeče tuto funkci v současné době podporují. Jak poznamenal Jon Hulka, rozměry lze dále omezit v CSS pomocí max-width, max-height, min-width a min-height.
Super důležité vědět:
Tato vlastnost nic neudělá, pokud není vlastnost overflow jiná než visible, což je výchozí hodnota pro většinu prvků. Takže obecně platí, že chcete-li ji použít, musíte nastavit něco jako overflow: scroll;
Citace: Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
CSS 3 obsahuje novou vlastnost pro prvky uživatelského rozhraní, která vám to umožní. Jedná se o vlastnost resize property. Do svého souboru stylů byste tedy přidali následující, abyste zakázali změnu velikosti všech prvků textarea:
textarea { resize: none; }
Jedná se o vlastnost CSS 3; pro zjištění kompatibility s prohlížeči použijte tabulku kompatibility.
Osobně bych považoval za velmi nepříjemné mít zakázanou změnu velikosti u prvků textarea. Je to jedna z těch situací, kdy se návrhář snaží "zlomit" klienta uživatele. Pokud váš návrh nedokáže'pojmout větší textarea, možná byste měli přehodnotit, jak váš návrh funguje. Každý uživatel může do svého uživatelského souboru stylů přidat textarea { resize: both !important; }
a zrušit tak vaše preference.