Safari에서 텍스트 영역 크기 조정 핸들 숨기기

내 응용 프로그램에서 텍스트 영역 구성 요소를 사용하고 있으며 높이를 동적으로 제어합니다. 사용자가 입력하면 텍스트가 충분할 때마다 높이가 증가합니다. 이것은 IE, Firefox 및 Safari에서 잘 작동합니다.

그러나 Safari에는 오른쪽 하단에 "핸들"도구가있어 사용자가 클릭하고 드래그하여 텍스트 영역의 크기를 조정할 수 있습니다. 또한 stackoverflow Ask a Question 페이지의 텍스트 영역에서이 문제를 발견했습니다. 이 도구는 혼란스럽고 기본적으로 방해가됩니다.

그래서 어쨌든이 크기 조정 핸들을 숨길 수 있습니까?

( "handle"이 올바른 단어인지 확실하지 않지만 더 나은 용어를 생각할 수 없습니다.)

safari webkit css

— david.mchonechase
소스

답변:

177

CSS로 크기 조정 동작을 재정의 할 수 있습니다.

textarea
{
   resize: none;
}

또는 단순히

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

유효한 속성 : both, horizontal, vertical, none

— Tamas Czinege
소스

여기서는 엄격하게 관련이 없지만 Safari는 최소 높이, 최대 높이, 최소 너비 및 최대 너비 CSS 속성을 존중하여 크기 조정을 활성화 한 상태로 유지하지만 크기를 조정할 수있는 범위에 제한을 둡니다.

— stevemegson

감사합니다! 이 같은 질문을하려고했습니다. :)

— alex

resize : none을 설정 한 후 마우스 오버시 표시하려면 어떻게해야합니까?

— Michael Forrest

@Michael Forrest : textarea : hover {resize : inherit! important; }? 나는 그것을 시도한 적이 없습니다.

— Tamas Czinege

한 가지주의 사항 : 사용자가 크기 <textarea>를 전혀 조정하지 못하게하면 사용성 문제가 될 수 있습니다. 설정 resize:vertical;은 종종 더 나은 옵션입니다. 레이아웃을 엉망으로 만들지 않아야하며 사용자에게 더 큰 제어 감각을 제공합니다.

— Web_Designer

다음 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)에만 해당됩니다 .

— Gaurang P
소스

-1

safari max-height 최대 너비 기회는 firefox 4.0 (b3pre)에서도 작동합니다. 좋은 예 : http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

— Fortrabbit-frank
소스