wake-up-neo.com

Textarea의 크기를 조정할 수있는 속성을 비활성화하는 방법?

textarea의 크기 조정 가능 속성을 비활성화하려고합니다.

현재 textarea의 오른쪽 아래 모서리를 클릭하고 마우스를 드래그하여 textarea의 크기를 조정할 수 있습니다. 이 기능을 어떻게 비활성화 할 수 있습니까?

 enter image description here

2374
user549757

다음 CSS 규칙은 textarea 요소의 크기 조정 동작을 비활성화합니다.

textarea {
  resize: none;
}

일부 (일부는 아님) textareas에 대해이를 비활성화하려면 옵션 쌍 이 있습니다.

textarea 속성을 name (예 : <textarea name="foo"></textarea>)으로 설정하여 특정 foo을 비활성화하려면 :

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

또는 id 속성 ​​(예 : <textarea id="foo"></textarea>)을 사용하는 경우 :

#foo {
  resize: none;
}

W3C page 는 크기 조정 제한에 대한 가능한 값을 나열합니다 : 가로, 세로 및 상속 없음 :

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

괜찮은 호환성 페이지 를 검토하여 현재이 기능을 지원하는 브라우저를 확인하십시오. Jon Hulka가 언급했듯이 CSS에서 max-width, max-height, min-width 및 min-height를 사용하여 치수가 추가 제한됨 일 수 있습니다.

알아야 할 매우 중요한 사항 :

이 속성은 overflow 속성이 visible 이외의 다른 것이 아닌 한 대부분의 요소에 대한 기본값이 아니면 아무 것도 수행하지 않습니다. 따라서 이것을 일반적으로 사용하려면 overflow : scroll;

Chris Coyier의 인용문 http://css-tricks.com/almanac/properties/r/resize/

3269
Donut

CSS에서 ...

textarea {
    resize: none;
}
195
Jeff Parker

나는 2 가지를 찾았다

먼저

textarea{resize:none}

이것은 css3 아직 릴리스되지 않았습니다 Firefox4 + chrome 및 safari

또 다른 형식 기능은 overflow : auto 이며 오른쪽 스크롤 막대를 제거하여 dir 속성

코드와 다른 브라우저

기본 html

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

일부 브라우저

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

100
Rami Jamleh

CSS3에는 UI 요소를위한 새로운 속성이 있습니다. 이 속성은 resize 속성 입니다. 따라서 모든 textarea 요소의 크기를 조정하지 않으려면 다음을 스타일 시트에 추가하십시오.

textarea { resize: none; }

이것은 CSS3 속성입니다. 브라우저 호환성을 확인하려면 호환성 차트 를 사용하십시오.

개인적으로, textarea 요소에서 크기를 조정할 수 없도록하는 것이 매우 성가시다. 이는 디자이너가 사용자의 클라이언트를 "중단"하려는 상황 중 하나입니다. 디자인이 더 큰 텍스트 영역을 수용 할 수 없다면, 디자인이 어떻게 작동하는지 재검토하고 싶을 것입니다. 모든 사용자는 자신의 사용자 스타일 시트에 textarea { resize: both !important; }를 추가하여 선호도를 무시할 수 있습니다.

60
James Sumners
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
23
Imtiaz Ali Baigal

깊은 지원이 필요하면 구식 기술을 사용할 수 있습니다.

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

이것은 html로 쉽게 할 수 있습니다.

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

이것은 나를 위해 작동합니다. true 속성의 기본값은 draggable입니다.

12

Resize 속성을 비활성화하려면 다음 CSS 속성을 사용하십시오.

resize: none;
  • 다음과 같이 이것을 인라인 스타일 속성으로 적용 할 수 있습니다.

    <textarea style="resize: none;"></textarea>
    
  • 또는 다음과 같이 <style>...</style> 요소 태그 사이에 있습니다.

    textarea {
        resize: none;
    }
    
5
Webeng

CSS에서 resize: none;를 사용하기 만하면됩니다.

resize property는 사용자가 요소의 크기를 재조정 할 수 있는지 여부를 지정합니다.

참고 : resize 속성은 계산 된 오버 플로우 값이 "visible"이 아닌 요소에 적용됩니다.

또한 resize 는 IE에서 현재 지원되지 않습니다.

다음은 resize에 대한 다양한 속성입니다.

크기 조정 안 함 :

textarea { 
  resize: none; 
}

양쪽 방향으로 (세로 및 가로 방향) 크기 조정 :

textarea { 
  resize: both; 
}

수직으로 크기 조정 :

textarea { 
  resize: vertical; 
}

가로 크기 변경 :

textarea { 
  resize: horizontal; 
}

또한 CSS 또는 HTML에서 widthheight을 사용하면 더 넓은 브라우저 지원으로 텍스트 영역의 크기가 조절되지 않습니다.

5
Alireza

CSS3는이 문제를 해결할 수 있습니다. 불행히도 그것은 사용 된 브라우저의 60 % 요즘에만 지원됩니다.

IE 및 iOS의 경우 크기를 조정할 수 없지만 textareawidth을 설정하여 height 치수를 제한 할 수 있습니다.

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

데모보기

3
Oriol

당신은 간단하게 textareaproperty를 다음처럼 비활성화 할 수 있습니다 :

textarea{
    resize: none;
}

수직또는 수평크기 조정, 사용

resize: vertical;

또는

resize: horizontal;
3
Ashraful

@style를 사용하면 사용자 정의 크기를 지정하고 (resize: none;) 크기 조정 기능을 비활성화 할 수 있습니다.

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
1

이 시도:

#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
Rafiqul Islam

resizecss 속성을 사용하십시오.

textarea {
 resize:none;
}

모든 텍스트 영역의 크기 조정 가능 속성을 비활성화합니다.

특정 텍스트 영역을 비활성화하려면 아래 지침을 사용하십시오

Id가 textarea1textarea의 크기 조정 가능 속성을 비활성화하려면이 코드를 사용하십시오.

#textarea1 {
 resize:none;
}

이름이 textareaname1textarea의 크기 조정 가능 속성을 비활성화하려면이 코드를 사용하십시오.

textarea[name="textareaname1"] {
 resize:none;
}
0
Gokul Raj K.N.

속성 크기 조정 방법을 보여주는 작은 데모를 만들었습니다. 나는 그것이 당신과 다른 사람들에게도 도움이되기를 바랍니다.

.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>
0
Ambuj Khanna

모든 텍스트 영역의 크기를 조정하지 않으려면

textarea {
    resize: none;
}

특정 textarea에 대한 크기 조정을 비활성화하려면 name 또는 id 속성을 추가하고 무언가로 설정하십시오. 이 경우 이름은 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
Abk

JQuery로 시도 할 수도있다.

$('textarea').css("resize", "none");
0
Santosh Khalse

! important를 추가하면 작동합니다.

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

개요는 특정 브라우저에서 파란색 외곽선을 피하는 것입니다.

0
kaelds