Hướng dẫn the input css

Cafedev chia sẻ cho ace về hiểu CSS Forms trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

• 1. Các trường Input với kiểu
• 2. padding với input
• 3. Input có viền
• 4. Inputs với màu
• 5. Focused Inputs – Tập trung vào input
• 6. Input với icon/image
• 7. Hiểu ứng với Search Input
• 8. Tạo kiểu Textareas
• 9. Kiểu cho Select Menus
• 10. Kiểu cho Input Buttons
• 11. Form hoàn thiện

1. Các trường Input với kiểu

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

A full-width input field:


  First Name
  

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ả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ân vân..

2. padding với input

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 một số margin, để thêm nhiều khoảng trống bên ngoài chúng:

Padded text fields:


  First Name
  
  Last Name
  

Lưu ý rằng chú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ử.

3. Input có viền

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

Text fields with borders:


  First Name
  
  Last Name
  

Copy and chạy code

4. Inputs với màu

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:

Colored text fields:


  First Name
  
  Last Name
  

5. Focused Inputs – Tập trung vào input

Theo mặc định, một số trình duyệt sẽ thêm đườ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 bộ chọn :focus để làm điều gì đó với trường nhập liệu khi nó được lấy nét:

In this example, we use the :focus selector to add a black border color to the text field when it gets focused (clicked on):
Note that we have added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus).


  First Name
  
  Last Name
  

6. Input với icon/image

Nếu bạn muốn có một biểu tượng bên trong mục nhập, 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 phần đệm lớn bên trái để dành không gian cho biểu tượng:

Input with icon:


  

7. Hiểu ứng với Search Input

Trong ví dụ này, chúng tôi sử dụng thuộc tính chuyển tiếp CSS để làm sinh động 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 tính chuyển đổi sau

Animated search input:


  

8. Tạo kiểu Textareas

Mẹo: Sử dụng thuộc tính thay đổi kích 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):

Tip: Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):


  Some text...

A styled select menu.


  
  VN
  Canada
  USA
  

10. Kiểu cho Input Buttons

Styled input buttons.

11. Form hoàn thiện

Responsive Form
Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.


  

  

    

      First Name
    
    

      
    
  
  

    

      Last Name
    
    

      
    
  
  

    

      Country
    
    

      
        Australia
        Canada
        USA
      
    
  
  

    

      Subject
    
    

      
    
  
  

    
  
  

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!