Nascondere la maniglia di ridimensionamento dell'area di testo in Safari

Sto usando i componenti textarea nella mia applicazione e controllo la loro altezza dinamicamente. Man mano che l'utente digita, l'altezza viene aumentata ogni volta che il testo è sufficiente. Funziona bene su IE, Firefox e Safari.

Tuttavia, in Safari, c'è uno strumento "maniglia" in basso a destra che consente all'utente di ridimensionare l'area di testo facendo clic e trascinando. Ho anche notato questo problema con l'area di testo nella pagina Fai una domanda di stackoverflow. Questo strumento crea confusione e fondamentalmente si intromette.

Quindi, c'è comunque da nascondere questo quadratino di ridimensionamento?

(Non sono sicuro che "gestire" sia la parola giusta, ma non riesco a pensare a un termine migliore.)

safari webkit css

— david.mchonechase
fonte

Risposte:

177

Puoi sovrascrivere il comportamento di ridimensionamento con CSS:

textarea
{
   resize: none;
}

o semplicemente

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

Le proprietà valide sono: both, horizontal, vertical, none

— Tamas Czinege
fonte

Non strettamente pertinente qui, ma Safari rispetta anche le proprietà CSS min-height, max-height, min-width e max-width per lasciare abilitato il ridimensionamento ma pone limiti su quanto può ridimensionare.

— stevemegson

Grazie! Stavo per fare la stessa domanda :)

— alex

E se volessi mostrarlo al passaggio del mouse dopo aver impostato il ridimensionamento: nessuno?

— Michael Forrest

@Michael Forrest: hai provato textarea: hover {resize: inherit! Important; }? Non l'ho mai provato, solo una supposizione.

— Tamas Czinege,

Un avvertimento: non consentire all'utente di ridimensionare <textarea>affatto potrebbe essere un problema di usabilità. L'impostazione resize:vertical;è spesso un'opzione migliore. Non dovrebbe rovinare il layout e offre all'utente un maggiore senso di controllo.

— Web_Designer

Utilizza la seguente regola CSS per disabilitare questo comportamento per tutti gli TextAreaelementi:

textarea {
    resize: none;
}

Se vuoi disabilitarlo per alcuni (ma non tutti) TextAreaelementi, hai un paio di opzioni (grazie a questa pagina ).

Per disabilitare uno specifico TextAreacon l' nameattributo impostato su foo(ie, <TextArea name="foo"></TextArea>):

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

Oppure, utilizzando un ID (ovvero <TextArea id="foo"></TextArea>):

#foo {
    resize: none;
}

Nota che questo è rilevante solo per i browser basati su WebKit (cioè Safari e Chrome), che aggiungono l'handle di ridimensionamento ai TextAreacontrolli.

— Gaurang P
fonte

-1

L'opportunità di safari max-height max-width funziona anche in firefox 4.0 (b3pre). buon esempio qui a proposito: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

— fortrabbit-frank
fonte