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ć?
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) textarea
S, 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/
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;
}
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
- FF 17.0.1
- chrome
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.
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>
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;
}
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
.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.
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; }
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 */
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>
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
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;
}
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;
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;" })
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");
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