Jak wyłączyć właściwość zmiany rozmiaru pola 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ć?

Tutaj wpisz opis obrazka

 2827
htmlcss
Author: Peter Mortensen, 2011-03-08
Source

17 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: Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

 3768
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
2020-01-22 15:32:32

W CSS ...

textarea {
    resize: none;
}
 218
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 dwie rzeczy:

Pierwszy 

textarea{resize: none}

Jest to CSS 3, , który nie został jeszcze wydany , kompatybilny z Firefox 4( i nowsze), Chrome i Safari.

Inną funkcją formatu jest overflow: auto aby pozbyć się prawego paska przewijania, biorąc pod uwagę 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

  • Internet Explorer 8

Tutaj wpisz opis obrazka

  • Firefox 17.0.1

Tutaj wpisz opis obrazka

  • Chrome

Tutaj wpisz opis obrazka

 113
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
2020-06-20 09:12:55

CSS 3 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ść CSS 3; 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.

 65
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
2019-09-26 09:24:48 
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
 28
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ć starej szkoły techniki: 

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;
}
 22
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
2019-09-26 09:31:46

Można to łatwo zrobić w HTML: 

<textarea name="textinput" draggable="false"></textarea>
To mi pasuje. Domyślną wartością jest true dla atrybutu draggable.
 16
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
2019-09-26 09:32:37

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 przeglądarce Internet Explorer.

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

Nie. Resize: 

textarea {
  resize: none;
}

Zmień rozmiar w obie strony (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.

 8
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
2019-09-26 09:39:48

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;
}
 7
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

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;
 5
Author: Peter Mortensen,
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
2019-09-26 09:40:31

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

Dla przeglądarek Internet Explorer i iOS nie można wyłączyć zmiany rozmiaru, ale można ograniczyć rozmiar 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

 4
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
2019-09-26 09:33:49

Stworzyłem małe demo, aby pokazać, jak działają właściwości zmiany rozmiaru. Mam nadzieję, że pomoże również Tobie i innym.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}
<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
 3
Author: Ambuj Khanna,
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
2019-06-13 05:18:22

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;" })
 2
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

Aby wyłączyć zmianę rozmiaru dla wszystkich textareas: 

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

HTML 

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

CSS 

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

#noresize {
    resize: none;
}
 1
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
2019-09-26 09:35:07

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

$('textarea').css("resize", "none");
 0
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

Dodanie !important 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
2019-09-26 09:29:43

W reactjs możesz wyłączyć widżet zmiany rozmiaru za pomocą właściwości style.

<textarea id={"multiline-id"} ref={'my-ref'} style={{resize: "none"}} className="text-area-additional-styles" />

 -1
Author: Vijay122,
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
2020-09-28 04:45:25