Nascondere textarea maniglia di ridimensionamento in Safari

Question

Sto utilizzando componenti textarea nella mia richiesta, e io controllare la loro altezza in modo dinamico. Come l'utente, l'altezza è aumentata ogni volta che c'è abbastanza testo. Questo funziona bene su IE, Firefox e Safari.

Tuttavia, in Safari, v'è uno strumento "gestire" in basso a destra che permette all'utente di ridimensionare la textarea cliccando e trascinando. Ho anche notato questo problema con la textarea in StackOverflow Fai una pagina domanda. Questo strumento è confusa e in fondo si mette di mezzo.

Quindi, c'è comunque di nascondere questa maniglia 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

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

textarea {
    resize: none;
}

Se si desidera disattivare per alcuni (ma non tutti) gli elementi TextArea, si dispone di un paio di opzioni (grazie a questa pagina ).

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

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

In alternativa, utilizzando un ID (vale a dire, <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Si noti che questo è rilevante solo per i browser basati su WebKit (vale a dire, Safari e Chrome), che aggiungono la maniglia di ridimensionamento per TextArea controlli.

Answer 3

l'opportunità max-width safari max-height funziona anche in Firefox 4.0 (b3pre). buon esempio a proposito: http://www.alanedwardes.com/ messaggi / safari-e-ridimensionabile-caselle di testo /