Căn chỉnh textbox và select box cùng chiều rộng bằng CSS box-sizing

Khi thiết lập chiều rộng và cao cho phần tử trong CSS, phần tử thường hiển thị lớn hơn kích thước thực tế. Nguyên nhân là theo mặc định (box model chuẩn), padding và border được cộng thêm vào width/height đã khai báo.

Giải pháp: box-sizing: border-box

Thuộc tính box-sizing: border-box khiến padding và border được tính vào bên trong width/height khai báo, giúp phần tử hiển thị đúng kích thước mong muốn.

Ví dụ minh họa

<!DOCTYPE html>
<html>
  <head>
    <style>
      input, select {
        width: 250px;
        border: 2px solid #000;
        padding: 0;
        margin: 0;
        height: 22px;
        /* Hỗ trợ trình duyệt cũ */
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      input {
        text-indent: 3px; /* Khoảng cách chữ từ viền trái */
      }
    </style>
  </head>
  <body>
    <input type="text" value="Tên ứng viên"><br>
    <select>
      <option>Lựa chọn</option>
      <option>Sinh viên</option>
      <option>Giáo viên</option>
      <option>Trưởng khoa</option>
    </select>
  </body>
</html>

Mẹo thực tế

Để áp dụng cho toàn bộ trang, thường dùng CSS reset:

*, *::before, *::after {
  box-sizing: border-box;
}