Nascondere textarea maniglia di ridimensionamento in Safari
Domanda
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).
Soluzione
È 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
Altri suggerimenti
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.
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 /