Form CSS

Bằng cách sử dụng CSS, bạn có thể cải thiện rất nhiều về外观 của biểu mẫu HTML:

Thử ngay

đặt kiểu cho trường nhập

sử dụng width để xác định chiều rộng của trường nhập:

thực例

input {
  width: 100%;
}

Thử ngay

Ví dụ trên áp dụng cho tất cả các yếu tố <input>. Nếu bạn chỉ muốn đặt kiểu cho một loại cụ thể của trường nhập, bạn có thể sử dụng bộ chọn thuộc tính:

  • input[type=text] - Chỉ chọn trường văn bản
  • input[type=password] - Chỉ chọn trường mật khẩu
  • input[type=number] - Chỉ chọn trường số
  • và vân vân...

đệm trường nhập

sử dụng padding thuộc tính để thêm không gian trong trường văn bản.

Lưu ý:Nếu có rất nhiều trường nhập, bạn có thể cần thêm khoảng trống bên ngoài để thêm không gian nhiều hơn bên ngoài chúng:

thực例

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

Thử ngay

Lưu ý rằng chúng tôi đã đặt box-sizing để đặt thuộc tính: border-boxđể đảm bảo rằng tổng chiều rộng và chiều cao của yếu tố bao gồm lề trong (đệm) và viền cuối cùng.

Vui lòng trong CSS Box Sizing trong chương này để học về box-sizing thông tin thêm về thuộc tính này.

trường nhập có viền

Vui lòng sử dụng border để thay đổi độ dày và màu sắc của viền, và sử dụng border-radius để thêm góc tròn:

thực例

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

Thử ngay

Nếu bạn chỉ cần viền dưới, hãy sử dụng border-bottom Thuộc tính:

thực例

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

Thử ngay

trường nhập màu sắc

Vui lòng sử dụng background-color để thêm màu nền cho trường nhập và sử dụng color để thay đổi màu văn bản:

thực例

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

Thử ngay

trường nhập có sự tập trung

Mặc định, một số trình duyệt sẽ thêm viền xanh lam xung quanh trường nhập khi có sự tập trung (nhấp chuột). Bạn có thể thêm outline: none; để loại bỏ hành vi này.

sử dụng :focus Chọn器 có thể đặt kiểu cho trường nhập khi nó có sự tập trung:

thực例 1

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

Vui lòng nhấp vào hộp văn bản:

Thử ngay

thực例 2

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

Vui lòng nhấp vào hộp văn bản:

Thử ngay

khung nhập có biểu tượng/ảnh

Nếu bạn muốn có biểu tượng trong khung nhập, hãy sử dụng background-image tính chất, và kết hợp với background-position tính chất cùng với.

thực例

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

Thử ngay

khung nhập tìm kiếm có hiệu ứng hoạt hình

Trong ví dụ này, chúng tôi sử dụng CSS transition tính chất được thiết lập để tạo hiệu ứng chuyển đổi về độ rộng khi khung nhập tìm kiếm được tập trung. Sau đó, bạn sẽ học thêm trong CSS Chuyển đổi một chương học thêm về transition kiến thức về tính chất.

thực例

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Thử ngay

thiết lập kiểu dáng của trường văn bản

Lưu ý:sử dụng resize tính chất này có thể ngăn chặn việc điều chỉnh kích thước của textareas (tắt grabber ở góc phải dưới):

thực例

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

Thử ngay

thiết lập kiểu dáng của menu chọn

thực例

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

Thử ngay

thiết lập kiểu dáng của nút nhập

thực例

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;
}
/* Lưu ý: Sử dụng width: 100% để tạo nút toàn chiều rộng */

Thử ngay

Để biết thêm thông tin về cách thiết lập kiểu nút bằng CSS, hãy học CSS Nút Hướng dẫn.

Trang web tương tác

Vui lòng điều chỉnh kích thước cửa sổ TIY Editor để xem hiệu ứng. Khi độ rộng màn hình nhỏ hơn 600 pixel, hai cột sẽ chồng lên nhau theo chiều dọc thay vì theo chiều ngang.

Cao cấp: Ví dụ tiếp theo sử dụng Truy vấn truyền thông Để tạo biểu mẫu tương tác. Trong chương tiếp theo, bạn sẽ học thêm nhiều kiến thức liên quan.

Xem menu tương tác