HTML 텍스트 상자의 크기는 어떻게 설정합니까?

HTML 텍스트 상자의 크기는 어떻게 설정합니까?

다음을 사용하십시오.

textarea {
    width: 200px;
}

또는

input[type="text"] {
    width: 200px;
}

'텍스트 상자'가 의미하는 바에 따라.

마크 업 :

<input type="text" class="resizedTextbox" />

CSS :

.resizedTextbox {width: 100px; height: 20px}

텍스트 상자 크기는 W3C 상자 모델 의 '피해자'라는 점에 유의하세요 . 피해자가 의미하는 것은 텍스트 상자의 높이와 너비가 패딩 높이 / 너비 및 테두리 너비에 추가하여 위에 할당 된 높이 / 너비 속성의 합계라는 것입니다. 이러한 이유로 다른 브라우저의 기본 패딩에 따라 텍스트 상자의 크기가 브라우저마다 약간 씩 다릅니다. 브라우저마다 텍스트 상자에 다른 패딩을 정의하는 경향이 있지만 대부분의 재설정 스타일 시트 는 <input />재설정 시트에 태그 를 포함하지 않는 경향 이 있으므로이 점을 명심해야합니다.

자신 만의 패딩을 정의하여이를 표준화 할 수 있습니다. 패딩이 지정된 CSS는 다음과 같습니다. 텍스트 상자는 모든 브라우저에서 동일하게 보입니다.

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

패딩이 0px 인 경우 일부 브라우저에서 텍스트 상자가 너무 꽉 차게 만드는 경향이 있기 때문에 1 픽셀 패딩을 추가했습니다. 디자인에 따라 더 많은 패딩을 추가 할 수 있지만 패딩을 직접 정의하는 것이 좋습니다. 그렇지 않으면 다른 브라우저에서 스스로 결정할 수 있습니다. 브라우저 간의 일관성을 더욱 높이려면 테두리를 직접 정의해야합니다.

input[type="text"]
{
    width:200px
}

텍스트 상자 코드 :

<input type="text" class="textboxclass" />

CSS 코드 :

input[type="text"] {
height: 10px;
width: 80px;
}

또는

.textboxclass {
height: 10px;
width: 80px;
}

따라서 먼저 속성 (첫 번째 예 참조) 또는 클래스 (마지막 예 참조)가있는 요소를 선택합니다. 나중에 요소에 높이 및 너비 값을 할당합니다.

이것은 IE 10 및 FF 23에서 나를 위해 작동합니다.

<input type="text" size="100" />

클래스 메서드를 사용하지 않으려면 부모-자식 메서드를 사용하여 텍스트 상자를 변경할 수 있습니다.

예를 들어. 내 양식 div에서 양식을 만들었습니다.

HTML 코드 :

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

이제 CSS 코드는 다음과 같습니다.

.form textarea{
    height: 220px;
    width: 342px; 

문제 해결됨.

임무! width 속성은 max-width 속성에 의해 잘립니다. 그래서 ....

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>

시험:

input[type="text"]{
padding:10px 0;}

이것은 텍스트 상자에 설정된 텍스트 크기와 독립적으로 유지되는 방법입니다. 대신 패딩을 사용하여 높이를 늘립니다.

이 코드를 시도하십시오.

input[type="text"]{
 padding:10px 0;}

이렇게하면 텍스트 상자에 설정된 텍스트 크기와 무관하게 유지됩니다. 대신 패딩을 사용하여 높이를 늘립니다.

height및 width속성을 사용하여 요소의 크기를 조정할 수 있습니다 .

종속 입력 너비와 컨테이너 너비를 만들 수 있습니다.

.container {
   width: 360px;
}

.container input {
   width: 100%;
}