텍스트 영역의 스케일링 방지 필드 세트

Question

간단한 양식 안에 textarea 입력이 있습니다. textarea을 축척하면 fieldset 경계가 표시됩니다. textarea 척도를 fieldset 척도에서 풀려면 어떻게해야합니까? 나는 이것을 수평 적 규모에만 적용하기를 원한다.

HTML

<form> 
    <fieldset> 
     <legend>Description</legend> 
     <label>Name</label> 
     <input type="text"> 
     <p></p> 
     <label>Describe the object</label> 
     <textarea></textarea> 
    </fieldset> 
</form> 

CSS

textarea { 
    display: block; 
    max-height: 200px; 
    max-width: 350px; 
} 

jsfiddle

Answer 1

textarea을 div 컨테이너에 래핑하고이 컨테이너의 크기를 제한하여 내 자신의 문제를 해결했습니다.

HTML

.textareas { 
    width: 300px; 
} 

Answer 2

가 FIELDSET에 최대 높이를 추가

<div class="textareas"> 
    <textarea></textarea> 
    </div> 

CSS, 그것은 높이 처리됩니다. 너비와 함께 작동하지 않아서 주위를 돌아 다니고 텍스트 영역을 div로 감싸고 필드 집합의 값에 max-witdh를 설정해야합니다.

<h1>Form Demo</h1> 
    <p> 
    <form> 
    <fieldset> 
     <legend>User Information</legend> 
     <label>Sex</label> 
     <input type="radio" 
      name="sex" 
      id="male" 
      value="male"/> 
     <label for="male">Male</label> 
     <input type="radio" 
      name="sex" 
      id="female" 
      value="female"/> 
     <label for="female">Female</label> 
    </fieldset> 

    <fieldset class="DontGrow"> 
     <legend>Description</legend> 
     <label>Name</label> 
     <input type="text"> 
     <p></p> 
     <label>Describe the object</label> 
     <div class="DontGrowWidth"> 
      <textarea></textarea> 
     <div> 
    </fieldset> 
    </form> 

CSS :

body { 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto; 
    font-family: sans-serif; 
} 
label:nth-child(2) { 
    font-weight:bold; 
} 

.DontGrow{ 
    height:160px; 
    max-height:160px; 

} 

.DontGrowWidth{ 
     max-width: 300px; 
} 

} 
fieldset { 
    margin-top: 30px; 
} 
input { 
    display: block; 
} 

textarea { 
    display: block; 
    max-height: 200px; 
    max-width: 400px; 
} 

input[type=radio] { 
    display: inline 
} 

Answer 3

이 질문은

How to disable resizable property of textarea?

textarea { 
    resize: none; 
} 

탐구하고 질문을하기 전에 먼저 검색을 알아 반복 계속된다. 구글 그것!