Styling Input Fields
Sử dụng thuộc tính width để xác định chiều rộng của input fields:
input { width: 100%; }Ví dụ trên áp dụng cho tất cả các element <input>. Nếu bạn chỉ muốn tạo kiểu cho một kiểu input cụ thể, bạn có thể sử dụng các attribute selector:
- input[type=text] - chỉ chọn text field
- input[type=password] - chỉ chọn password field
- input[type=number] - chỉ chọn number field
- vv..
Padding Inputs
Sử dụng thuộc tính padding để thêm khoảng trống bên trong input field.
Mẹo: Khi bạn có nhiều input gần nhau, bạn cũng có thể muốn thêm một số margin, để thêm nhiều khoảng trống bên ngoài chúng:
input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; }
Border Inputs
Sử dụng thuộc tính border để thay đổi kích thước và màu border, đồng thời sử dụng thuộc tính border-radius để thêm các góc tròn:
input[type=text] { border: 2px solid red; border-radius: 4px; }Nếu bạn chỉ muốn có đường viền dưới cùng, hãy sử dụng thuộc tính border-bottom:
input[type=text] { border: none; border-bottom: 2px solid red; }
Color Inputs
Sử dụng thuộc tính background-color để thêm màu nền vào đầu vào và thuộc tính color để thay đổi màu văn bản:
input[type=text] { background-color: #3CBC8D; color: white; }
Focus Inputs
Theo mặc định, một số trình duyệt sẽ thêm một đường viền màu xanh xung quanh input khi nó được focus (được nhấp vào). Bạn có thể loại bỏ hành vi này bằng cách thêm outline: none; vào input.
Sử dụng :focus selector để thực hiện điều gì đó với trường nhập khi nó được focus:
input[type=text]:focus { border: 3px solid #555; }
Input với icon/image
Nếu bạn muốn có một icon bên trong input, hãy sử dụng thuộc tính background-image và định vị nó bằng thuộc tính background-position. Cũng lưu ý rằng chúng tôi thêm một padding bên trái để dành không gian cho icon:
input[type=text] { background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding-left: 40px; }
Animated Search Input
Trong ví dụ này, chúng tôi sử dụng thuộc tính transition CSS để tạo hiệu ứng cho chiều rộng của đầu vào tìm kiếm khi nó được focus.
input[type=text] { transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; }
Styling Textareas
Mẹo: Sử dụng thuộc tính resize thước để ngăn các vùng văn bản bị thay đổi kích thước (tắt "grabber" ở góc dưới cùng bên phải):
textarea { width: 100%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; resize: none; }
Styling Select Menus
select { width: 100%; padding: 16px 20px; border: none; border-radius: 4px; background-color: #f1f1f1; }
Styling Input Buttons
input[type=button], input[type=submit], input[type=reset] { background-color: #04AA6D; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer; }