วิธีรับความกว้างของอินพุตและเลือกฟิลด์เท่ากัน

ในแบบฟอร์มฉันมีช่องเลือกหนึ่งช่องและช่องป้อนข้อมูลสองช่อง องค์ประกอบเหล่านี้อยู่ในแนวตั้ง น่าเสียดายที่ฉันไม่สามารถรับความกว้างขององค์ประกอบเหล่านี้ได้เท่ากัน

นี่คือรหัสของฉัน:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

ตัวอย่างข้างต้นความกว้างที่ดีที่สุดสำหรับองค์ประกอบที่เลือกคือ 198 หรือ 199 พิกเซล (แน่นอนว่าฉันลอง 193px แต่ความแตกต่างนั้นสำคัญมาก) ฉันคิดว่ามันขึ้นอยู่กับความละเอียดบนคอมพิวเตอร์และเบราว์เซอร์ต่างๆเนื่องจากองค์ประกอบเหล่านี้มีความกว้างไม่เท่ากัน (บางครั้งฉันคิดว่าความแตกต่างอยู่ที่ประมาณ 1 หรือ 2 พิกเซล) ฉันพยายามตั้งค่าองค์ประกอบเหล่านี้ในแถว div หรือตารางแล้ว แต่ก็ไม่ได้ผล

ถาม: ฉันจะรับความกว้างขององค์ประกอบเหล่านี้เท่ากันได้อย่างไร

คำตอบที่อัปเดต

นี่คือวิธีการเปลี่ยนโมเดลกล่องที่ใช้โดยองค์ประกอบอินพุต / textarea / เลือกเพื่อให้ทั้งหมดทำงานในลักษณะเดียวกัน คุณต้องใช้box-sizingคุณสมบัติที่ใช้กับคำนำหน้าสำหรับแต่ละเบราว์เซอร์

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

ซึ่งหมายความว่าความแตกต่าง 2px ที่เรากล่าวถึงก่อนหน้านี้ไม่มีอยู่ ..

ตัวอย่างที่http://www.jsfiddle.net/gaby/WaxTS/5/

หมายเหตุ: บน IE ใช้งานได้ตั้งแต่เวอร์ชัน 8 ขึ้นไป ..

ต้นฉบับ

ถ้าคุณตั้งค่าของพวกเขาพรมแดนแล้วselectองค์ประกอบจะเป็น 2 พิกเซลน้อยกว่าinputองค์ประกอบ ..

ตัวอย่าง: http://www.jsfiddle.net/gaby/WaxTS/2/

ฉันลองคำตอบของ Gaby (+1) ข้างต้นแล้ว แต่มันช่วยแก้ปัญหาของฉันได้เพียงบางส่วน ฉันใช้ CSS ต่อไปนี้แทนโดยที่ content-box เปลี่ยนเป็น border-box:

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

เพิ่มรหัสนี้ใน css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

สร้างคลาสอื่นและเพิ่มขนาดด้วยตัวอย่าง 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }