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

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

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

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

답변

다음 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/

답변

CSS에서 …

textarea {
    resize: none;
}

답변

나는 두 가지를 발견했다.

먼저

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

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

  • 크롬

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

답변

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

textarea { resize: none; }

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

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

답변

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

답변

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

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

답변

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

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

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