1.Tạo kiểu cho trường đầu vào

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

Ví dụ:

Ví dụ trên có thể á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ả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ố
  • …v.v.

1.1 Phần đệm đầu vào

Sử dụng thuộc tính padding để 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 thuộc tính margin, để thêm nhiều không gian bên ngoài chúng

Ví dụ:

Lưu ý rằng tôi đã đặt thuộc tính box-sizing 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ử

1.2 Đường viền của đầu vào

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

Ví dụ:

1.3 Màu của đầu vào

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

Ví dụ:

 

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 đượ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 bộ chọn :focus để thực hiện điều gì đó với trường nhập khi nó được lấy nét

Ví dụ:

1.4 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 tính background-image và định vị nó với thuộc tính background-position

Lưu ý rằ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

Ví dụ:

1.5 Đầu vào Tìm kiếm Hoạt ảnh

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

Ví dụ:

2. Tạo kiểu cho menu chọn

Ví dụ:

3. Tạo kiểu các nút

Ví dụ:

4. Biểu mẫu đáp ứng

Ở ví dụ dưới đây hãy 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 sẽ chồng lên nhau thay vì cạnh nhau

Ví dụ: