Domanda Come disabilitare la proprietà ridimensionabile di textarea?


Voglio disabilitare la proprietà ridimensionabile di a textarea.

Attualmente, posso ridimensionare a textarea cliccando sull'angolo in basso a destra del textarea e trascinando il mouse. Come posso disabilitare questo?


2153
2018-03-08 16:15


origine


risposte:


La seguente regola CSS disabilita il ridimensionamento del comportamento per textarea elementi:

textarea {
  resize: none;
}

Per disabilitarlo per alcuni (ma non per tutti) textareas, ci sono a un paio di opzioni.

Per disabilitare uno specifico textarea con il name attributo impostato su foo (Cioè, <textarea name="foo"></textarea>):

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

Oppure, usando un id attributo (cioè, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Il Pagina W3C elenca i possibili valori per il ridimensionamento delle restrizioni: nessuno, entrambi, orizzontale, verticale ed ereditario:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Rivedi un decente pagina di compatibilità per vedere quali browser attualmente supportano questa funzione. Come ha commentato Jon Hulka, le dimensioni possono essere ulteriormente trattenuto in CSS con larghezza massima, altezza massima, larghezza minima e altezza minima.

Super importante sapere:

Questa proprietà non fa nulla a meno che la proprietà di overflow non sia qualcosa di visibile, che è l'impostazione predefinita per la maggior parte degli elementi. Quindi, in genere per usarlo, dovrai impostare qualcosa come overflow: scroll;

Citazione di Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2860
2018-03-08 16:17



In CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Ho trovato 2 cose

primo

textarea{resize:none}

questo è un css3 che non è ancora stato rilasciato compatibile con Firefox4 + chrome e safari 

un'altra funzione di formattazione è overflow: auto per sbarazzarsi della scrollbar giusta tenendo conto dir attributo

codice e diversi browser

HTML di base

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Alcuni browser

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • cromo

enter image description here


91
2017-12-27 20:58



CSS3 ha una nuova proprietà per gli elementi dell'interfaccia utente che ti consentiranno di farlo. La proprietà è il ridimensiona la proprietà. Quindi dovresti aggiungere quanto segue al tuo foglio di stile per disabilitare il ridimensionamento di tutti gli elementi textarea:

textarea { resize: none; }

Questa è una proprietà CSS3; usare un tabella di compatibilità per vedere la compatibilità del browser.

Personalmente, troverei molto fastidioso avere il ridimensionamento disabilitato sugli elementi textarea. Questa è una di quelle situazioni in cui il progettista sta cercando di "rompere" il client dell'utente. Se il tuo progetto non può ospitare una textarea più ampia, potresti voler riconsiderare il modo in cui funziona il tuo progetto. Qualsiasi utente può aggiungere textarea { resize: both !important; } al foglio di stile dell'utente per sovrascrivere le tue preferenze.


57
2018-03-08 16:35



<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

19
2017-11-06 09:19



Se hai bisogno di un supporto profondo, puoi usare la tecnica della vecchia scuola

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

18
2018-02-12 12:14



Questo può essere fatto in HTML facile

<textarea name="textinput" draggable="false"></textarea>

Questo funziona per me. Il valore predefinito è true per draggable attributo.


9
2017-07-21 05:18



Devi semplicemente usare: resize: none; nel tuo CSS.

Il ridimensionare proprietà specifica se un elemento è ridimensionabile o meno   dall'utente.

Nota: La proprietà resize si applica agli elementi il ​​cui overflow calcolato   il valore è qualcosa di diverso da "visibile".

Anche ridimensionare al momento non supportato in IE.

Qui ci sono diverse proprietà per ridimensionare:

Nessun ridimensionamento:

textarea { 
  resize: none; 
}

Ridimensiona entrambi i modi (verticalmente e orizzontalmente):

textarea { 
  resize: both; 
}

Ridimensiona verticalmente:

textarea { 
  resize: vertical; 
}

Ridimensiona orizzontalmente:

textarea { 
  resize: horizontal; 
}

Anche se lo hai width e height nel tuo CSS o HTML, impedirà il ridimensionamento dell'area di testo, con un supporto più ampio per i browser.


4
2018-06-01 13:11