Biểu mẫu CSS
Giao diện của một biểu mẫu HTML có thể được cải thiện đáng kể với CSS:
Tạo kiểu cho các trường đầu vào
Sử dụng thuộc widthtính để xác định chiều rộng của trường đầu vào:
Thí dụ
input
{
width: 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 tạo kiểu cho một kiểu nhập cụ thể, bạn có thể sử dụng các bộ chọn thuộc tính:
input[type=text]- sẽ chỉ chọn các trường văn bảninput[type=password]- sẽ chỉ chọn các trường mật khẩuinput[type=number]- sẽ chỉ chọn các trường số- Vân vân..
Đầu vào đệm
Sử dụng thuộc paddingtính để thêm khoảng trống bên trong trường văn bản.
Mẹo: Khi bạn có nhiều đầu vào sau nhau, bạn cũng có thể muốn thêm một số margin, để thêm không gian bên ngoài chúng:
Thí dụ
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Lưu ý rằng chúng tôi đã đặt thuộc box-sizingtính thành
border-box. Điều này đảm bảo rằng phần đệm và đường viền cuối cùng được bao gồm trong tổng chiều rộng và chiều cao của các phần tử.
Đọc thêm về thuộc box-sizingtính trong chương Định cỡ hộp CSS của chúng tôi.
Đầu vào có viền
Sử dụng thuộc bordertính để thay đổi kích thước và màu viền, đồng thời sử dụng thuộc border-radiustính để thêm các góc tròn:
Thí dụ
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 border-bottomtính:
Thí dụ
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Đầu vào màu
Sử dụng thuộc background-colortính để thêm màu nền vào đầu vào và thuộc colortính để thay đổi màu văn bản:
Thí dụ
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Đầu vào Tập trung
Theo mặc định, một số trình duyệt sẽ thêm một đường viền màu xanh xung quanh đầu vào khi nó được lấy tiêu điểm (đượ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 đầu vào.
Sử dụng :focusbộ chọn để thực hiện điều gì đó với trường nhập khi nó được lấy nét:
Thí dụ
input[type=text]:focus
{
background-color: lightblue;
}
Thí dụ
input[type=text]:focus
{
border: 3px solid #555;
}
Nhập bằng biểu tượng / hình ảnh
Nếu bạn muốn có một biểu tượng bên trong đầu vào, hãy sử dụng thuộc background-imagetính và định vị nó với thuộc background-positiontính. Cũng lưu ý rằng chúng tôi thêm một phần đệm lớn bên trái để dành không gian cho biểu tượng:
Thí dụ
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Đầu vào Tìm kiếm Hoạt hình
Trong ví dụ này, chúng tôi sử dụng thuộc tính CSS transitionđể tạo hoạt ảnh cho chiều rộng của đầu vào tìm kiếm khi nó được lấy tiêu điểm. Bạn sẽ tìm hiểu thêm về thuộc
transitiontính sau, trong chương Chuyển đổi CSS của chúng tôi .
Thí dụ
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Tạo kiểu Textareas
Mẹo: Sử dụng thuộc resizetính để ngăn các vùng văn bản bị thay đổi kích thước (vô hiệu hóa "bộ lấy" ở góc dưới cùng bên phải):
Thí dụ
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Tạo kiểu cho menu chọn
Thí dụ
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Các nút đầu vào tạo kiểu
Thí dụ
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 width: 100% for full-width buttons */
Để biết thêm thông tin về cách tạo kiểu cho các nút bằng CSS, hãy đọc Hướng dẫn về các nút CSS của chúng tôi .
Biểu mẫu đáp ứng
Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng. Khi màn hình có chiều rộng dưới 600px, hãy đặt hai cột chồng lên nhau thay vì cạnh nhau.
Nâng cao: Ví dụ sau sử dụng truy vấn phương tiện để tạo biểu mẫu đáp ứng. Bạn sẽ tìm hiểu thêm về điều này trong chương sau.