텍스트 영역의 크기 조정 가능 속성을 비활성화하려면 어떻게합니까?

2649

의 크기 조정이 가능한 속성을 비활성화하고 싶습니다 textarea.

현재 textarea오른쪽 하단 모서리를 클릭 textarea하고 마우스를 끌어서 크기를 조정할 수 있습니다 . 어떻게 비활성화 할 수 있습니까?

여기에 이미지 설명을 입력하십시오

html  css 
— 사용자
소스
4
@JDIsaaks-또한 특정 상황에서 크기를 조정하면 레이아웃과 인쇄가 중단 될 수 있습니다 (현재 미션 크리티컬 프로젝트의 중요한 측면).
— random_user_name
10
때로는 크기를 조정할 수없는 텍스트 영역을 원할 수도 있습니다. 예를 들어,이 경우 텍스트 영역을 레이블처럼 보이는 것으로 조건부로 변환 할 때. 무작위로 떠 다니는 그래버가있는 레이블이 옆으로 떨어져있는 것이 정말 이상하게 보입니다.
— neminem
2
좋은 것을 모두 사랑하려면 실제 텍스트 영역에서이 작업을 수행하지 마십시오. 그렇지 않으면 고급 사용자를 소외시킬 것입니다. 핵심 브라우저 기능을 깨는 것은 핵 옵션으로 간주되어야합니다.
— 초

답변:

3531

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

textarea {
  resize: none;
}

(전부는 아니지만) 일부를 해제하려면 textarea하는가 s의 옵션의 커플 .

특정하지 않으려면 textarea와 name에 속성 세트를 foo(예 <textarea name="foo"></textarea>) :

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

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

#foo {
  resize: none;
}

W3C 페이지 없음, 둘, 수평, 수직 및 상속 : 제한 크기를 조정에 대한 목록 가능한 값 :

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

적절한 호환성 페이지 를 검토하여 현재이 기능을 지원하는 브라우저를 확인하십시오. Jon Hulka가 언급했듯이 CSS에서 최대 너비, 최대 높이, 최소 너비 및 최소 높이를 사용하여 치수를 더 제한 할 수 있습니다 .

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

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

Sara Cope의 인용문, http://css-tricks.com/almanac/properties/r/resize/

— 도넛
소스
Firefox, Opera 및 / 또는 IE를위한 솔루션이 있습니까?
— Šime Vidas
6
@ Šime IE 및 FF3 (및 이전)은 크기 조정 지원을 추가하지 않으므로 이에 대한 솔루션이 필요하지 않습니다. FF4의 경우이 솔루션이 작동합니다.
— Donut
24
davidwalsh.name/textarea-resize에 따라 resize : vertical 또는 resize : horizontal을 사용하여 크기 조정을 한 차원으로 제한하십시오. 또는 max-width, max-height, min-width 및 min-height 중 하나를 사용하십시오.
— Jon Hulka
3
나는 속성이 아닌 CSS를 사용하여 이것을 설정하는 것이 이상하다고 생각하는 유일한 사람입니까? CSS를 사용하여 비활성화 또는 확인 또는 기타 속성을 설정할 수없는 이유는 무엇입니까?
— Buksy
6
@Buksy "disabled"는 시각적 속성이 아닌 상태이기 때문입니다. 따라서 스타일링 언어 로 결정해서는 안된다는 것이 논리적입니다 .
— Kroltan
105

나는 두 가지를 발견했다.

먼저

textarea{resize: none}

이것은 CSS 3이며 아직 출시되지 않았 으며 Firefox 4 이상, Chrome 및 Safari와 호환됩니다 .

또 다른 형식 기능은 dir 속성 overflow: auto을 고려하여 오른쪽 스크롤 막대를 제거하는 것입니다 .

코드 및 다른 브라우저

기본 HTML

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

일부 브라우저

  • 인터넷 익스플로러 8

여기에 이미지 설명을 입력하십시오

  • Firefox 17.0.1

여기에 이미지 설명을 입력하십시오

  • 크롬

여기에 이미지 설명을 입력하십시오

— 라미 자 믈레
소스
62

CSS 3에는이를 수행 할 수있는 UI 요소에 대한 새로운 속성이 있습니다. 이 속성은 resize 속성 입니다. 따라서 모든 텍스트 영역 요소의 크기 조정을 비활성화하려면 스타일 시트에 다음을 추가하십시오.

textarea { resize: none; }

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

개인적으로 텍스트 영역 요소에서 크기 조정을 비활성화하면 매우 성가신 것으로 나타났습니다. 디자이너가 사용자의 클라이언트를 "중단"하려고하는 상황 중 하나입니다. 디자인에 더 큰 텍스트 영역을 수용 할 수없는 경우 디자인 작동 방식을 다시 고려할 수 있습니다. 모든 사용자는 textarea { resize: both !important; }자신의 사용자 스타일 시트에 추가 하여 환경 설정을 대체 할 수 있습니다.

— 제임스 섬 너스
소스
그러나 그것은 단지 자신의 크기를 조정하고 작동하지 않는 무언가를 만드는 사용자보다는 의도적으로 레이아웃을 깨는 사용자 texarea일 것입니다.
— Redwolf Programs
21

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

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;
}
— 예브게니
소스
7
또한 resize:none이 솔루션과 함께 사용 하면 실망스럽게 작동하지 않는 하단 모서리에 핸들이 표시되지 않습니다.
— MacroMan
13

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

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

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

— 소피 타 위크 라 마신
소스
이것은 HTML 5 속성이므로 최신 브라우저 만 지원합니다. IE가 9 이상부터 지원하는 곳을 읽었습니다.
— Antony D' Andrea
4
이것은 대부분의 브라우저에서 작동합니다. 모든 최신 브라우저에서.
— Suchitha Wickramasinghe
그것은 크기 조정에서 텍스트 영역을 방지하지 않습니다
— Mishko 블라디미르에게
@ AntonyD'Andrea 이것은 최신 Chrome에서 작동하지 않습니다 : jsfiddle.net/ps2v8df9
— Advait Junnarkar
6

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

resize: none;

  • 다음과 같이 인라인 스타일 속성으로 적용 할 수 있습니다.

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

  • 또는 <style>...</style>다음과 같이 요소 태그 사이에 있습니다 .

    textarea {
    resize: none;
}
— Webeng
소스
6

resize: none;CSS에서 간단히 사용 하십시오.

크기 조정 속성은 사용자가 요소 있는지 여부를 지정합니다.

참고 : resize 속성은 계산 된 오버플로 값이 "표시"이외의 요소에 적용됩니다.

또한 크기 조정 순간에 Internet Explorer에서 지원되지 않습니다.

크기 조정에 대한 다른 속성은 다음과 같습니다.

크기 조정 안함 :

textarea {
  resize: none;
}

두 가지 방법으로 (수직 및 가로) 크기 조정 :

textarea {
  resize: both;
}

세로로 크기 조정 :

textarea {
  resize: vertical;
}

가로로 크기 조정 :

textarea {
  resize: horizontal;
}

또한이있는 경우 width와 height귀하의 CSS 나 HTML, 그것은 광범위한 브라우저 지원, 당신의 텍스트 영역의 크기를 조절할 방지 할 수 있습니다.

— 알리레자
소스
3

CSS 3은이 문제를 해결할 수 있습니다. 불행히도 현재 사용중인 브라우저의 60 % 에서만 지원됩니다 .

인터넷 익스플로러 및 iOS 용 당신은 크기 조정을 해제 할 수 없습니다, 그러나 당신은 제한 할 수 textarea의 설정에 의해 차원을 width하고 height.

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

데모보기

— 오리올
소스
3

다음 과 같이 textarea 속성을 비활성화 할 수 있습니다 .

textarea {
    resize: none;
}

수직 또는 수평 크기 조정 을 비활성화하려면

resize: vertical;

또는

resize: horizontal;
— 피터 모텐슨
소스
2

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

.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>
스 니펫 확장

— 암 부즈 칸나
소스
1

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

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— 카를로스 데 예수 베즈
소스
1
안녕하세요, 귀하의 답변에 감사드립니다. 다음에 코드를 포맷하십시오.
— Baptiste Mille-Mathias
이것은 asp.net MVC 기반 답변입니다. 아주 좋아요
— yogihosting
0

모든 크기 조정을 비활성화하려면 textarea:

textarea {
    resize: none;
}

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

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

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

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

— 카레 이즈
소스
6
!important속성을 남용하지 마십시오 . CSS 속성 resize: none이 크기 조정 기능을 제거 할 수있는 경우 너비와 높이를 수정하는 것은 의미가 없습니다
— Raptor
1
!important악 하지 않습니까?
— 피터 Mortensen
현재 Chrome에서는 가로 크기 조정이 중지되지만 여전히 텍스트 영역의 세로 크기를 조정할 수 있습니다.
— Junnakar Advait
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.