내 응용 프로그램에서 텍스트 영역 구성 요소를 사용하고 있으며 높이를 동적으로 제어합니다. 사용자가 입력하면 텍스트가 충분할 때마다 높이가 증가합니다. 이것은 IE, Firefox 및 Safari에서 잘 작동합니다.
그러나 Safari에는 오른쪽 하단에 “핸들”도구가있어 사용자가 클릭하고 드래그하여 텍스트 영역의 크기를 조정할 수 있습니다. 또한 stackoverflow Ask a Question 페이지의 텍스트 영역에서이 문제를 발견했습니다. 이 도구는 혼란스럽고 기본적으로 방해가됩니다.
그래서 어쨌든이 크기 조정 핸들을 숨길 수 있습니까?
( “handle”이 올바른 단어인지 확실하지 않지만 더 나은 용어를 생각할 수 없습니다.)
답변
CSS로 크기 조정 동작을 재정의 할 수 있습니다.
textarea
{
resize: none;
}
또는 단순히
<textarea style="resize: none;">TEXT TEXT TEXT</textarea>
유효한 속성 : both, horizontal, vertical, none
답변
다음 CSS 규칙을 사용하여 모든 TextArea
요소에 대해이 동작을 비활성화합니다 .
textarea {
resize: none;
}
일부 (전부는 아님) TextArea
요소에 대해 비활성화 하려면 몇 가지 옵션이 있습니다 ( 이 페이지 덕분에 ).
특정 기능을 비활성화하려면 TextArea
와 name
에 속성 세트를 foo
(예 <TextArea name="foo"></TextArea>
) :
textarea[name=foo] {
resize: none;
}
또는 ID 사용 (예 🙂 <TextArea id="foo"></TextArea>
:
#foo {
resize: none;
}
이는 TextArea
컨트롤에 크기 조정 핸들을 추가하는 WebKit 기반 브라우저 (예 : Safari 및 Chrome)에만 해당됩니다 .
답변
safari max-height 최대 너비 기회는 firefox 4.0 (b3pre)에서도 작동합니다. 좋은 예 : http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/