html - 자동조절 - textarea 크기 지정




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

textarea 의 크기를 조정할 수있는 속성을 비활성화하려고합니다.

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


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

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

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


2 가지를 찾았습니다.

먼저

textarea{resize:none}

이것은 아직 출시되지 않은 css3 이며 Firefox4 + 크롬 및 사파리 와 호환됩니다.

또 다른 형식 기능은 overflow:autodir 속성을 고려하여 오른쪽 스크롤바를 제거합니다.

코드 및 다른 브라우저

기본 html

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

일부 브라우저

  • IE8

  • FF 17.0.1

  • 크롬


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

textarea { resize: none; }

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

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


CSS에서 ...

textarea {
    resize: none;
}

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

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

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

    textarea {
        resize: none;
    }
    

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

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

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

textarea{
    resize: none;
}

세로 또는 가로 크기 조정을 사용하지 않으려면

resize: vertical;

또는

resize: horizontal;

단순히 다음을 사용하십시오 : resize: none; 귀하의 CSS에.

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

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

또한 IE에서 현재 지원되지 않는 크기 조정 .

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

크기 조정 안 함 :

textarea { 
  resize: none; 
}

세로 및 가로로 두 가지 크기 조정 :

textarea { 
  resize: both; 
}

세로로 크기 조정 :

textarea { 
  resize: vertical; 
}

가로 크기 조정 :

textarea { 
  resize: horizontal; 
}

또한 CSS 또는 HTML에 widthheight 가있는 경우 광범위한 브라우저를 지원하여 텍스트 영역의 크기가 조절되지 않습니다.


이 시도:

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


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

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

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


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




css