ฉันจะกำหนดขนาดของกล่องข้อความ HTML ได้อย่างไร

ฉันจะกำหนดขนาดของกล่องข้อความ HTML ได้อย่างไร

เพียงใช้:

textarea {
    width: 200px;
}

หรือ

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

ขึ้นอยู่กับความหมายของ 'textbox'

มาร์กอัปของคุณ:

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

CSS:

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

เก็บไว้ในใจว่าขนาดกล่องข้อความเป็น "เหยื่อ" ของกล่องแบบ W3C สิ่งที่ฉันหมายถึงเหยื่อคือความสูงและความกว้างของกล่องข้อความคือผลรวมของคุณสมบัติความสูง / ความกว้างที่กำหนดไว้ด้านบนนอกเหนือจากความสูง / ความกว้างของช่องว่างภายในและความกว้างของเส้นขอบ ด้วยเหตุนี้กล่องข้อความของคุณจะมีขนาดแตกต่างกันเล็กน้อยในเบราว์เซอร์ที่แตกต่างกันขึ้นอยู่กับการเว้นระยะห่างเริ่มต้นในเบราว์เซอร์ที่แตกต่างกัน แม้ว่าเบราว์เซอร์ที่แตกต่างกันมักจะกำหนดช่องว่างในช่องข้อความที่แตกต่างกัน แต่สไตล์ชีตการรีเซ็ตส่วนใหญ่มักจะไม่รวม<input />แท็กไว้ในแผ่นงานการรีเซ็ตดังนั้นจึงเป็นสิ่งที่ควรคำนึงถึง

คุณสามารถสร้างมาตรฐานได้โดยกำหนดช่องว่างภายในของคุณเอง นี่คือ CSS ของคุณที่มีช่องว่างภายในที่ระบุดังนั้นกล่องข้อความจึงมีลักษณะเหมือนกันในทุกเบราว์เซอร์:

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

ฉันเพิ่มช่องว่างภายใน 1 พิกเซลเนื่องจากเบราว์เซอร์บางตัวมักจะทำให้กล่องข้อความดูหนาเกินไปหากช่องว่างนั้นเป็น 0px คุณอาจต้องการเพิ่มช่องว่างภายในขึ้นอยู่กับการออกแบบของคุณ แต่ขอแนะนำอย่างยิ่งให้คุณกำหนดช่องว่างภายในด้วยตัวคุณเองมิฉะนั้นคุณจะปล่อยให้เบราว์เซอร์ต่างๆตัดสินใจด้วยตัวเอง เพื่อความสอดคล้องกันมากขึ้นในเบราว์เซอร์คุณควรกำหนดเส้นขอบด้วยตัวเอง

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 ถูกตัดโดยแอตทริบิวต์ความกว้างสูงสุด ก็เลยใช้ ....

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