Biểu mẫu trong CSS

Giao diện của một biểu mẫu HTML có thể được cải thiện rất nhiều với CSS:

Định dạng trường nhập vào

Sử dụng thuộc tính awidth để xác định chiều rộng của trường nhập vào:

input {
    awidth: 100%;
}

Ví dụ trên áp dụng cho tất cả các phần tử <input>. Nếu bạn chỉ muốn định dạng kiểu nhập vào cụ thể, bạn có thể sử dụng vùng chọn thuộc tính:

• input [type=text] – sẽ chỉ chọn trường văn bản
• input [type=password] – sẽ chỉ chọn các trường mật khẩu
• input [type=number] – sẽ chỉ chọn các trường số
• …

Thêm padding cho trường nhập vào

Sử dụng thuộc tính padding để thêm không gian bên trong trường văn bản. Mẹo: Khi bạn có nhiều dữ liệu nhập vào sau mỗi trường, bạn cũng có thể muốn thêm một số margin để thêm nhiều không gian bên ngoài:

input[type=text] {
    awidth: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

Lưu ý đã thiết lập thuộc tính định dạng box-sizing cho border-box. Điều này đảm bảo rằng các padding và đường viền cuối cùng nằm trong trong tổng chiều rộng và chiều cao của các phần tử.

Đường viền trường nhập vào

Sử dụng thuộc tính border để thay đổi kích cỡ và màu đường viền, đồng thời sử dụng thuộc tính border-radius để bo tròn góc cạnh.

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}

Nếu muốn đường viền bên dưới, thêm thuộc tính border-bottom:

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}

Màu sắc trường nhập vào

Sử dụng thuộc tính background-color để thêm màu nền cho trường nhập vào và thuộc tính color để thay đổi màu văn bản:

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}

Gây chú ý cho trường nhập vào

Mặc định một số trình duyệt sẽ thêm một đường viền màu xanh xung quanh trường nhập vào khi nó được lấy nét (nhấp vào). Bạn có thể loại bỏ điều này bằng cách thêm outline: none; vào trường nhập.

Sử dụng vùng chọn :focus để tạo ấn tượng cho trường đầu vào khi muốn gây sự chú ý đến người dùng:

Trường nhập bên trái:

input[type=text]:focus {
    background-color: lightblue;
}

Trường nhập bên phải:

input[type=text]:focus {
    border: 3px solid #555;
}

Trường nhập vào với hình ảnh

Nếu bạn muốn một biểu tượng bên trong đầu vào, 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 khi thêm một padding trái đủ lớn để có không gian cho biểu tượng:

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding-left: 40px;
}

Hiệu ứng cho ô tìm kiếm

Trong ví dụ này chúng ta sử dụng thuộc tính transition trong CSS3 để kích hoạt chiều rộng của trường nhập vào tìm kiếm khi muốn tạo dấu ấn.

input[type=text] {
    -webkit-transition: awidth 0.4s ease-in-out;
    transition: awidth 0.4s ease-in-out;
}

input[type=text]:focus {
    awidth: 100%;
}

Định dạng vùng văn bản

Mẹo: sử dụng thuộc tính resize để ngăn không cho văn bản được thay đổi kích cỡ (vô hiệu hóa “grabber” ở góc dưới bên phải):

textarea {
    awidth: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

Định dạng cho thanh điều hướng

select {
    awidth: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

Định dạng cho button

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* Tip: use awidth: 100% for full-awidth buttons */