Biểu mẫu trong CSS - CSS Forms

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    288 lượt xem


Giao diện của một HTML Forms có thể được cải thiện đáng kể với CSS.

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;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.