Jak wyłączyć właściwość zmiany rozmiaru textarea?

Chcę wyłączyć właściwość resizable textarea.

Obecnie mogę zmienić rozmiar textarea klikając w prawym dolnym rogu textarea i przeciągając myszką. Jak mogę to wyłączyć?

 2207
htmlcss
Author: Cthulhu, 2011-03-08
Source

16 answers

Następująca reguła CSS wyłącza zachowanie zmiany rozmiaru dla textarea elementy: 

textarea {
  resize: none;
}

Aby wyłączyć go dla niektórych (ale nie wszystkich) textareaS, istnieje kilka opcji .

Aby wyłączyć określone textarea z atrybutem name ustawionym na foo (tj., <textarea name="foo"></textarea>):

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

Lub, używając atrybutu id (tj., <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Strona W3C zawiera listę możliwych wartości dla ograniczeń zmiany rozmiaru: none, both, horizontal, vertical i dziedziczenie: 

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

Przejrzyj przyzwoitą stronę zgodności , aby zobaczyć, które przeglądarki obecnie obsługują tę funkcję. Jak skomentował Jon Hulka, wymiary mogą być dodatkowo ograniczone w CSS używając max-width, max-height, min-width i min-height.

Super ważne, aby wiedzieć:

Ta właściwość nic nie robi, chyba że właściwość overflow jest czymś innym niż visible, co jest domyślne dla większości elementów. Więc ogólnie, aby użyć tego, będziesz trzeba ustawić coś takiego jak overflow: scroll;

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

 2936
Author: Donut,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-20 11:54:08

W CSS ...

textarea {
    resize: none;
}
 176
Author: Jeff Parker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-08 16:17:54

Znalazłem 2 rzeczy

Pierwszy 

textarea{resize:none}

Jest to css3 , który nie jest jeszcze wydany Compatible with Firefox4+ chrome i safari

Inną funkcją formatu jest przepełnienie: auto aby pozbyć się prawego paska przewijania z uwzględnieniem dir atrybut

Kod i różne przeglądarki

podstawowy html 

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

niektóre przeglądarki

  • IE8

Tutaj wpisz opis obrazka

  • FF 17.0.1

Tutaj wpisz opis obrazka

  • chrome

Tutaj wpisz opis obrazka

 93
Author: Rami Jamleh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-27 20:58:33

CSS3 ma nową właściwość dla elementów interfejsu użytkownika, która pozwoli Ci to zrobić. Właściwość jest resize właściwość . Aby wyłączyć zmianę rozmiaru wszystkich elementów textarea, należy dodać następujące elementy do arkusza stylów: 

textarea { resize: none; }

Jest to właściwość CSS3; użyj wykresu zgodności , aby zobaczyć zgodność przeglądarki.

Osobiście uważam, że to bardzo irytujące, aby zmienić rozmiar na elementach textarea. Jest to jedna z tych sytuacji, w której projektant stara się "break" klienta użytkownika. Jeśli twój projekt nie może pomieścić większej powierzchni tekstowej, możesz rozważyć, jak działa twój projekt. Każdy użytkownik może dodać textarea { resize: both !important; } do swojego arkusza stylów użytkownika, aby zastąpić swoje preferencje.

 57
Author: James Sumners,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 13:45:55 
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
 19
Author: Imtiaz Ali Baigal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-06 09:19:04

Jeśli potrzebujesz głębokiego wsparcia, możesz użyć old school technique 

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
Author: yevgeniy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-12 12:14:27

Można to zrobić w html easy 

<textarea name="textinput" draggable="false"></textarea>
To mi pasuje. Wartość domyślna to true dla atrybutu draggable.
 9
Author: Thusitha Wickramasinghe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-22 03:43:06

Po prostu używasz: resize: none; w swoim CSS.

Właściwość resize określa, czy element można zmienić rozmiar przez użytkownika.

Uwaga: właściwość resize dotyczy elementów, których obliczone przepełnienie wartość jest czymś innym niż"widzialnym".

Również zmiana rozmiaru nie jest obecnie obsługiwana w IE.

Oto różne właściwości zmiany rozmiaru:

No Resize: 

textarea { 
  resize: none; 
}

Zmień rozmiar obu sposoby (pionowo i poziomo):

textarea { 
  resize: both; 
}

Zmień rozmiar w pionie: 

textarea { 
  resize: vertical; 
}

Zmień rozmiar w poziomie: 

textarea { 
  resize: horizontal; 
}

Również jeśli masz width i height W CSS lub HTML, zapobiegnie to zmianie rozmiaru obszaru textarea, z szerszą obsługą przeglądarek.

 4
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-03 18:15:53

Aby wyłączyć właściwość resize, użyj następującej właściwości CSS: 

resize: none;

  • Możesz zastosować to jako właściwość stylu inline w następujący sposób: 

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

  • Lub pomiędzy <style>...</style> znacznikami elementów jak tak: 

    textarea {
    resize: none;
}
 4
Author: Webeng,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-10 13:19:46

CSS3 może rozwiązać ten problem. Niestety jest on obecnie obsługiwany tylko przez 60% używanych przeglądarek .

Dla IE i iOS nie można wyłączyć zmiany rozmiaru, ale można ograniczyć Wymiar textarea, ustawiając jego width i height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Zobacz Demo

 2
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-01 20:58:45

Spróbuj tego: 

#foo {
    resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>
 1
Author: Rafiqul Islam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-05 09:59:53

Dodawanie !ważne sprawia, że działa: 

width:325px !important; height:120px !important; outline:none !important;

Outline jest po prostu, aby uniknąć niebieskiego konturu w niektórych przeglądarkach

 0
Author: kaelds,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-03 19:07:36

Aby wyłączyć zmianę rozmiaru dla wszystkich textarea 

textarea {
    resize: none;
}

Aby wyłączyć zmianę rozmiaru dla określonego textarea Dodaj atrybut name lub id i ustaw go na coś. W tym przypadku nazywa się noresize 

<textarea name='noresize' id='noresize'> </textarea>

CSS 

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}
 0
Author: Abk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-25 08:19:12

Możesz po prostu wyłączyć właściwość textarea w następujący sposób: 

textarea{
    resize: none;
}

Aby wyłączyć w pionie lub w poziomie , użyj 

resize: vertical;

Lub 

resize: horizontal;
 0
Author: Ashraful,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-28 07:09:56

Za pomocą @style możesz nadać mu niestandardowy rozmiar i wyłączyć funkcję zmiany rozmiaru (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
 0
Author: Carlos de Jesus Baez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-30 19:21:48

Możesz spróbować również z jQuery 

$('textarea').css("resize", "none");
 -1
Author: Santosh Khalse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-15 08:15:16