Nascondere l'handle di ridimensionamento textage in Safari

Question

Uso componenti di area di testo nella mia applicazione e controllo la loro altezza in modo dinamico. Mentre l'utente digita, l'altezza aumenta quando c'è abbastanza testo. Funziona perfettamente con IE, Firefox e Safari.

Tuttavia, in Safari, c'è uno strumento "maniglia" in basso a destra che consente all'utente di ridimensionare la textarea cliccando e trascinando. Ho anche notato questo problema con l'area di testo nella pagina di Stackoverflow Ask a Question. Questo strumento è fonte di confusione e fondamentalmente si intromette.

Quindi, è comunque necessario nascondere questo handle di ridimensionamento?

(non sono sicuro se "manico" è la parola giusta, ma non riesco a pensare di un termine migliore.)

Answer 1

È possibile ignorare il comportamento di ridimensionamento con i CSS:

textarea 
{ 
    resize: none; 
} 

o semplicemente

<textarea style="resize: none;">TEXT TEXT TEXT</textarea> 

proprietà validi sono: entrambi, orizzontale, verticale, nessuno

Answer 2

SAF ari max-height max-width opportunity funziona anche in firefox 4.0 (b3pre). buon esempio a proposito: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

Answer 3

utilizzare la seguente regola CSS per disattivare questo comportamento per tutti TextArea elementi:

textarea { 
    resize: none; 
} 

Se si desidera disattivare per alcuni (ma non tutti) TextArea elementi, è avere un paio di opzioni (grazie a this page).

Per disattivare una determinata TextArea con l'attributo name impostato foo (cioè <TextArea name="foo"></TextArea>):

textarea[name=foo] { 
    resize: none; 
} 

Oppure, con un ID (cioè, <TextArea id="foo"></TextArea>):

#foo { 
    resize: none; 
} 

noti che questo è rilevante solo per i browser basati su WebKit (ad esempio, Safari e Chrome), che aggiungono l'handle di ridimensionamento ai controlli TextArea.