Următoarea regulă CSS dezactivează redimensionarea comportament pentru textarea
elemente:
textarea {
resize: none;
}
Să-l dezactivați pentru unele (dar nu toate) `textarea, există o cuplu de opțiuni.
Pentru a dezactiva un anumit textarea " cu "nume atribut setat la" foo " (de exemplu,
<textarea name="foo">
textarea[name=foo] {
resize: none;
}
Sau, folosind un " id " atribut (de exemplu, <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
De W3C pagina liste de valori posibile pentru redimensionarea restricții: nici unul, atât pe orizontală, verticală, și moșteni:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Comentariu decent compatibilitate pagina pentru a vedea ce browsere acceptă în prezent această funcție. Ca Jon Hulka a comentat, dimensiunile pot fi continuare reținut în CSS folosind max-lățime, max-înălțimea, min-lățime, și min-înălțime.
foarte important să știi:
Această proprietate nu face nimic cu excepția cazului în care preaplin de proprietate este altceva decât vizibilă, care este implicit pentru cele mai multe elemente. Deci, în general, pentru a utiliza acest lucru,'ll trebuie să setați ceva de genul overflow: scroll;
Citat de Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
Am găsit două lucruri:
Prima
textarea{resize: none}
Acesta este un CSS 3, care nu este lansat încă, compatibil cu Firefox 4 (și mai târziu), Chrome și Safari.
Un alt format caracteristică este de a overflow: auto
pentru a scăpa de dreptul de defilare, ținând cont de dir atribut.
HTML de bază
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Unele browsere
CSS 3 are o nouă proprietate pentru elemente de UI, care vă va permite să facă acest lucru. Proprietatea este redimensiona proprietate. Deci, ar trebui să adăugați următoarele la stil pentru a dezactiva redimensionarea tuturor textarea elemente:
textarea { resize: none; }
Acesta este un CSS 3 proprietate; folosiți-o grafic de compatibilitate pentru a vedea compatibilitatea browser-ul.
Personal, mi-ar găsi că este foarte enervant de a avea redimensionarea dezactivat pe textarea elemente. Aceasta este una dintre acele situații în care proiectantul este încercarea de a "pauză" de utilizare's client. Dacă design-ul poate't găzdui o mai mare textarea, ați putea dori să-și reconsidere modul lucrări de proiectare. Orice utilizator poate adauga textarea { redimensiona: ambele !important; }
a lor de utilizator de stil pentru a trece peste preferințele dumneavoastră.
Dacă aveți nevoie de sprijin profund, puteți folosi o școală veche tehnica:
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;
}
Acest lucru poate fi făcut în HTML cu ușurință:
<textarea name="textinput" draggable="false"></textarea>
Aceasta funcționează și pentru mine. Valoarea implicită este adevărat "pentru" draggable
atribut.
Pur și simplu utilizați: `redimensiona: nici unul; în CSS.
redimensiona proprietate specifică dacă un element este redimensionabilă de către utilizator.
Notă: redimensiona proprietate se aplică elemente a căror calculat preaplin valoarea este altceva decât "vizibil".
De asemenea, redimensiona nu sunt acceptate în Internet Explorer în momentul de față.
Aici sunt diferite proprietăți pentru a redimensiona:
Nu Redimensionare:
textarea {
resize: none;
}
Redimensiona în ambele sensuri (vertical & orizontal):
textarea {
resize: both;
}
Redimensionare pe verticală:
textarea {
resize: vertical;
}
Redimensionare pe orizontală:
textarea {
resize: horizontal;
}
De asemenea, dacă aveți "lățime" și "înălțime" în CSS sau HTML, se va preveni textarea fi redimensionate, cu un larg suport browsere.
Pentru a dezactiva redimensionarea proprietate, folosiți următoarea proprietate CSS:
resize: none;
<stil>...</stil>
element de categorie astfel:textarea { redimensiona: nici unul; }
CSS 3 poate rezolva această problemă. Din păcate it's acceptată numai pe 60% din browsere folosite în zilele noastre.
Pentru Internet Explorer și iOS, puteți't dezactiva redimensionarea, dar puteți limita textarea
dimensiune prin stabilirea sale "lățime" și "înălțime".
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
[A Se Vedea Demo][2]
Puteți pur și simplu dezactivați textarea proprietate astfel:
textarea {
resize: none;
}
Pentru a dezactiva verticale sau orizontală redimensionarea, utilizare
resize: vertical;
sau
resize: horizontal;
Încercați acest lucru:
#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>
Cu @stil
, vă pot da o dimensiune particularizată și dezactiva redimensionarea caracteristică (redimensiona: nici unul;)
.
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Am creat un mic demo pentru a arăta cât de redimensiona proprietăți de muncă. Sper că va ajuta și pe alții ca ei.
.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>
Pentru a dezactiva redimensionarea pentru toate `textarea este:
textarea {
resize: none;
}
Pentru a dezactiva redimensionarea pentru un anumit textarea
, adaugă un atribut, "nume", sau un " id " și setați-o la ceva. În acest caz, este numit noresize
<textarea name='noresize' id='noresize'> </textarea>
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}