Thanh tìm kiếm CSS

Thành phần đầu vào tìm kiếm có thể được sử dụng để cho phép người dùng tìm kiếm trên trang web của bạn bằng cách sử dụng truy vấn chuỗi và thành phần này có nhiều kiểu, biến thể và kích thước được tạo bằng các lớp tiện ích từ Tailwind CSS

Bạn cũng sẽ tìm thấy các thành phần tìm kiếm nâng cao hơn trên trang này, bao gồm các lựa chọn danh mục thả xuống, các nút tìm kiếm được đặt bên trong trường nhập liệu, trường tìm kiếm bằng giọng nói, v.v.

Ví dụ về thanh tìm kiếm #

Bắt đầu với ví dụ mặc định về thành phần đầu vào tìm kiếm bao gồm biểu tượng và nút gửi

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

   
    Search
    

        

            
        
        
        Search
    

Tìm kiếm với trình đơn thả xuống #

Sử dụng thành phần tìm kiếm này với danh sách thả xuống để cho phép người dùng của bạn chọn danh mục mà họ muốn truy vấn tìm kiếm được nhắm mục tiêu trong đó

Chuyển chế độ xem đầy đủ Chuyển chế độ xem máy tính bảng Chuyển chế độ xem di động

Sao chép

Tất cả danh mục

• Mockup
• mẫu
• Thiết kế
• biểu trưng

    

        Your Email
        All categories 
        

            

            

                Mockups
            
            

                Templates
            
            

                Design
            
            

                Logos
            
            
        

        

            
            
                
                Search
            
        
    

Đầu vào tìm kiếm đơn giản #

Sử dụng dạng đơn giản nhất của thành phần đầu vào tìm kiếm có biểu tượng và nút tìm kiếm bên cạnh trường văn bản

Hầu hết người dùng sử dụng hộp tìm kiếm như một nỗ lực cuối cùng để tìm thứ gì đó trước khi rời khỏi trang web. Là một yếu tố thực dụng, quy trình phụ trợ của thanh tìm kiếm là điều cần thiết. Tuy nhiên, nhiều nhà thiết kế bỏ qua thiết kế frontend. Tuy nhiên, tính năng nhỏ này đóng một vai trò quan trọng trong trải nghiệm người dùng tốt và nên bao gồm phong cách

Bài viết này sẽ thảo luận về các phương pháp thiết kế và sẽ cung cấp tuyển tập các thiết kế hộp tìm kiếm CSS

Thực tiễn thiết kế thanh tìm kiếm

Khi nào nên sử dụng hộp tìm kiếm

Không phải mọi trang web đều cần chức năng tìm kiếm. Hộp tìm kiếm giúp người xem tìm kiếm thông tin nhanh chóng. Nếu một trang web có bố cục đẹp và được tổ chức tốt thì nó không cần hộp tìm kiếm. Tốt nhất là bao gồm hộp tìm kiếm khi trang web đang phát triển và chứa nhiều nội dung. Bằng cách này, người dùng có thể tìm thấy những gì họ đang tìm kiếm

Nguyên tắc thiết kế hộp tìm kiếm CSS

Thanh tìm kiếm phải hiển thị, dễ nhận biết, đơn giản và có thể sử dụng được. Nó phải phù hợp với thiết kế của trang web nhưng cũng nổi bật. Các thực hành thiết kế sau đây sẽ giúp làm điều đó

Vị trí hộp tìm kiếm

Dựa trên mẫu quét hình chữ F phổ biến, vị trí tốt nhất để đặt thanh tìm kiếm là ở trên cùng bên trái hoặc bên phải của trang. Khi tạo một trang web không tuân thủ các thông lệ thiết kế truyền thống, hãy đảm bảo rằng hộp tìm kiếm hiển thị và ở vị trí mà khách truy cập sẽ tìm thấy

Nút Tìm kiếm

Nút gửi có thể tạo hoặc phá vỡ hộp tìm kiếm. Dưới đây là các phương pháp hay nhất cho nút tìm kiếm

• Làm cho nó trông giống như một nút
• Đừng làm cho nó quá nhỏ
• Làm cho nó nổi bật
• Đặt tên cho nó một cái gì đó trực quan như "Tìm kiếm"
• Tốt nhất là không cung cấp nhiều hơn một nút tìm kiếm vì điều này có thể gây nhầm lẫn cho khách truy cập

Trường nhập liệu tìm kiếm

Trường nhập tìm kiếm cũng có tác động đến phong cách của hộp tìm kiếm. Thực hành thiết kế tốt là bao gồm một văn bản giữ chỗ trong trường tìm kiếm. Văn bản giữ chỗ cho biết rằng người xem có thể tìm kiếm và nó có thể đề xuất nội dung cần tìm kiếm. Ngoài ra, đảm bảo rằng trường tìm kiếm không quá ngắn hạn chế truy vấn tìm kiếm

Ví dụ thiết kế hộp tìm kiếm CSS tốt nhất

Biểu tượng biến hình

Dự phòng nhúng CodePen

Đây là hộp tìm kiếm biến hình. Đó là một giải pháp hay cho màn hình nhỏ nên trường tìm kiếm không còn nữa. Kính lúp là một chỉ báo không thể nhầm lẫn cho thanh tìm kiếm. Khi được nhấp vào, nó sẽ biến thành một thanh tìm kiếm kích thước đầy đủ. Nhấp vào “X” sẽ thu nhỏ nó trở lại kính lúp

Biểu mẫu tìm kiếm có thể mở rộng với CSS3

Dự phòng nhúng CodePen

CSS của thanh tìm kiếm này cho phép nó mở rộng và điều chỉnh mà không ảnh hưởng đến phong cách. Khung sẽ mở rộng hoặc co lại theo số lượng ký tự đã nhập

Biểu mẫu tìm kiếm hoạt ảnh với các tương tác vi mô

Dự phòng nhúng CodePen

Đây là một thanh tìm kiếm khác là một thiết kế tuyệt vời cho màn hình nhỏ. Nó bao gồm các hình ảnh động nhỏ làm cho nó thú vị hơn. Nó bắt đầu như một biểu tượng tìm kiếm trong một vòng kết nối. Nhấp vào nó sẽ chuyển sang thanh tìm kiếm với các góc tròn

Thiết kế các trang web trực quan hấp dẫn và hiệu suất cao mà không cần viết một dòng mã nào

Làm hài lòng khách hàng của bạn bằng cách tạo các trang web sáng tạo và tăng cường phản hồi
nhanh chóng mà không cần có kinh nghiệm viết mã. Slider Revolution giúp bạn có thể
có một lượng lớn khách hàng tìm đến bạn để có các thiết kế trang web hợp thời trang.

bắt đầu thiết kế

Hộp tìm kiếm nảy

Dự phòng nhúng CodePen

Các hộp tìm kiếm phải đơn giản nhưng không gây nhàm chán. Thư bị trả lại thêm một số hứng thú cho hộp tìm kiếm này. Nó có một thiết kế tối thiểu hiển thị một biểu tượng tìm kiếm. Nhưng khi bấm vào thì nó bung ra hơi nảy

Hộp tìm kiếm giống như Amazon

Dự phòng nhúng CodePen

Amazon sử dụng một thanh tìm kiếm toàn diện để tổ chức lựa chọn sản phẩm khổng lồ của mình. Hộp tìm kiếm này sử dụng thiết kế tương tự để giúp người dùng tìm thấy những gì họ cần nhanh hơn. Nó hoàn hảo cho các trang web có danh mục sản phẩm lớn

Biểu mẫu tìm kiếm CSS3

Dự phòng nhúng CodePen

Đây là một biểu mẫu tìm kiếm nâng cao bao gồm tất cả các phương pháp thiết kế hộp tìm kiếm tốt nhất. Nó đơn giản, có thể nhìn thấy và hữu ích cho khách truy cập. Nó bao gồm một tính năng lịch sử và cho phép khách truy cập xóa các truy vấn tìm kiếm trước đó

Tương tác tìm kiếm động

Dự phòng nhúng CodePen

Hoạt hình luôn tạo thêm hứng thú cho các yếu tố trang web. Hộp tìm kiếm này bắt đầu dưới dạng biểu tượng tìm kiếm phóng to cổ điển. Kính chuyển vào trường tìm kiếm và tay cầm vào nút tìm kiếm. Xác thực HTML5 của đầu vào không trống đảm bảo rằng trường đầu vào tìm kiếm vẫn mở

Hộp Tìm kiếm trong Nội dung Di chuyển đến Tiêu đề Cố định

Dự phòng nhúng CodePen

Sau khi gửi tìm kiếm, khách truy cập thường phải cuộn qua rất nhiều nội dung. Điều này thậm chí còn đúng hơn với các thiết bị di động. Đây là một tiêu đề dính gắn vào đầu trang và ở đó khi khách truy cập cuộn xuống. Điều này hữu ích nếu họ không tìm thấy thông tin họ đang tìm kiếm. Thay vì cuộn hết cỡ để quay lại đầu trang, họ có thể gửi một tìm kiếm khác ngay lập tức

Thanh tìm kiếm động

Dự phòng nhúng CodePen

Đây là một tùy chọn khác cho một hộp có nhiều hình ảnh động. Nó là một thanh tìm kiếm đơn giản nhưng bao gồm các tính năng thiết kế thông minh. Đầu tiên, biểu tượng tìm kiếm trượt vào một thanh gần như thể nó đang cố tỏ ra thanh lịch. Thứ hai, nó bao gồm một biểu tượng xóa để xóa văn bản nhập tìm kiếm và đóng thanh

Tìm kiếm trang web do Google cung cấp

Công cụ tìm kiếm này bao gồm jQuery và cho phép khách truy cập gửi tìm kiếm tùy chỉnh. Khách truy cập có thể chọn các tùy chọn để tìm kiếm trên web, hình ảnh, tin tức và video. Nó cung cấp một hình thức tìm kiếm có cấu trúc và nâng cao

Hoạt hình trường tìm kiếm

Dự phòng nhúng CodePen

Đây là một hộp tìm kiếm phong cách bổ sung thêm sự tinh tế để làm hài lòng người dùng. Khi khách truy cập gửi tìm kiếm, biểu tượng kính lúp sẽ quét văn bản. Sau đó, nó sẽ hiển thị kết quả theo bố cục giống như thẻ

Hộp tìm kiếm mềm

Dự phòng nhúng CodePen

Sử dụng điều này cho một thanh tìm kiếm đơn giản, đơn giản mà không có hình ảnh động và hiệu ứng. Đó là một cấu trúc HTML và CSS sử dụng bảng màu tối thiểu. Nó chứa một biểu tượng thay vì nút tìm kiếm và có văn bản giữ chỗ

Hoạt ảnh thanh tìm kiếm có thể mở rộng

Dự phòng nhúng CodePen

Thanh tìm kiếm có thể mở rộng là một cách tuyệt vời để giữ cho trang web có tổ chức và gọn gàng. Đây là một thanh tìm kiếm tròn duy trì phong cách tối giản. Nó mở rộng khi di chuột và ngưng tụ khi chuột di chuyển đi

Bộ chọn hiển thị trình giữ chỗ

Dự phòng nhúng CodePen

Trình giữ chỗ là thứ duy nhất mà khách truy cập nhìn thấy với hộp tìm kiếm này. Nó sử dụng HTML và CSS nhưng không có JavaScript nên nút tìm kiếm bị ẩn. Sau khi khách truy cập bắt đầu nhập, nút “Go” xuất hiện

Thanh tìm kiếm đơn giản

Dự phòng nhúng CodePen

Sau khi xem các hộp tìm kiếm với nhiều tính năng ưa thích, thật tuyệt khi thấy một tính năng cơ bản. Đây là một thiết kế cổ điển và đơn giản với một nút tìm kiếm và trường văn bản. Văn bản giữ chỗ cho biết "bạn đang tìm gì?"

Chuyển đổi tìm kiếm toàn màn hình tài liệu

Dự phòng nhúng CodePen

Trong khi một số trang web chọn giảm tầm quan trọng của hộp tìm kiếm, những trang web khác lại chấp nhận nó và biến nó thành một tính năng chính. Biểu mẫu tìm kiếm này biến biểu tượng kính lúp nhỏ thành hộp tìm kiếm lấp đầy toàn bộ màn hình. Màu nền của biểu tượng lấp đầy màn hình. Trình giữ chỗ có kích thước phông chữ lớn vẫy gọi khách truy cập nhập yêu cầu tìm kiếm. Kính lúp tự quay thành nút thoát. Nhấp vào nút thoát sẽ làm cho hộp tìm kiếm thu nhỏ lại thành một biểu tượng nhỏ

Mở rộng thanh tìm kiếm HTML & CSS

Với HTML, CSS và JavaScript, đây là hộp tìm kiếm chức năng bao gồm hoạt ảnh. Nó có chiều rộng linh hoạt, hoạt động tốt trên thiết bị di động và thu nhỏ lại thành biểu tượng khi không sử dụng

Thanh tìm kiếm chao đảo

Dự phòng nhúng CodePen

Không khách truy cập nào có thể bỏ lỡ thanh tìm kiếm này. Đó là một quán bar độc đáo và vui tươi, nổi bật. Nó hoàn hảo cho các trang web đi ngược lại thiết kế trang web truyền thống. Mỗi chữ cái của từ “tìm kiếm” nằm trong một vòng tròn khác nhau và có màu khác nhau. Các vòng tròn nảy lên và xuống như thể chúng đang tạo sóng

Hộp tìm kiếm hoạt hình

Dự phòng nhúng CodePen

Đối với những người thích hoạt hình, hộp tìm kiếm này có đầy đủ các tính năng hoạt hình thú vị. Nó bắt đầu như một chiếc kính lúp có nền trắng. Khi người dùng nhấp vào nó, nó sẽ mở rộng để bao gồm trường nhập tìm kiếm. Trình giữ chỗ nhảy vào vị trí và nút thoát quay đến vị trí của nó

Hộp tìm kiếm ưa thích

Dự phòng nhúng CodePen

Hộp tìm kiếm ưa thích cho phép một tiêu đề và một tiêu đề phụ. Nó có bán kính đường viền tròn nhưng với một lần nhấp, các góc tròn biến mất và chỉ còn lại một đường

Hiệu ứng Tiêu điểm Hộp Tìm kiếm

Dự phòng nhúng CodePen

Màu sắc được trình bày với biểu mẫu tìm kiếm này thu hút sự tập trung của người xem. Lúc đầu, một hộp tìm kiếm đơn giản, đơn giản và không màu được hiển thị. Khi khách truy cập nhấp vào nó, nền sẽ chuyển sang màu và màu nhấn làm nổi bật trường nhập liệu

Hộp tìm kiếm CSS3 với Hộp đề xuất tiêu điểm

Dự phòng nhúng CodePen

Hộp tìm kiếm này có thiết kế đơn giản nhưng bao gồm một số hiệu ứng làm cho nó hấp dẫn. Văn bản tiên đoán cung cấp các đề xuất tìm kiếm và giúp khách truy cập tiến hành tìm kiếm nhanh. Nó cũng có các tính năng góc tròn và bóng

Tìm kiếm tùy chỉnh đơn giản

Dự phòng nhúng CodePen

Các thanh tìm kiếm cung cấp các tìm kiếm tùy chỉnh thường lớn và không hấp dẫn. Ngược lại, thanh tìm kiếm này cung cấp cho khách truy cập các tùy chọn tìm kiếm tùy chỉnh với thiết kế đơn giản. Nó hiển thị các biểu tượng nhỏ và chú giải công cụ để khách truy cập có thể thực hiện tìm kiếm trang web cụ thể

Trường tìm kiếm bằng giọng nói đơn giản

Dự phòng nhúng CodePen

Người xem đang di chuyển thích tìm kiếm bằng giọng nói hơn so với tìm kiếm thủ công. Thanh tìm kiếm này hỗ trợ tìm kiếm bằng giọng nói. Nó hoàn hảo cho các ứng dụng bản đồ hoặc du lịch để thu hút những người quá bận rộn để gõ từ khóa

Hộp tìm kiếm trong suốt

Dự phòng nhúng CodePen

Mặc dù hộp tìm kiếm phải nổi bật, nhưng nó không phải là trọng tâm chính của trang. Đây là hộp tìm kiếm có nền trong suốt để nó hòa vào trang web. Màu viền là đường trắng đậm nên vẫn nhìn rõ

Kết thúc suy nghĩ về Hộp tìm kiếm CSS

Như đã lưu ý ở trên, hộp tìm kiếm đóng một vai trò quan trọng như một yếu tố chức năng của trang web. Nó giúp người xem tiết kiệm thời gian và năng lượng khi họ tìm kiếm trên một trang web. Tuy nhiên, nó cũng là một phần của toàn bộ trải nghiệm trang web và do đó không nên bỏ qua trong quá trình thiết kế

Có một số khía cạnh đối với hộp tìm kiếm, nhưng với một số sáng tạo, chúng có thể có phong cách riêng và thu hút khách truy cập. Tất nhiên, mỗi trang web sẽ có một hình thức tìm kiếm khác nhau để phù hợp với các tình huống khác nhau. Một số cần bố cục cơ bản, trong khi một số khác cần cung cấp tùy chọn tìm kiếm tùy chỉnh để nâng cao trải nghiệm tìm kiếm. Trong mọi trường hợp, có thể tạo một thanh tìm kiếm hấp dẫn và có thể sử dụng được

Các ví dụ về hộp tìm kiếm CSS ở trên bao gồm các tùy chọn phong cách và chức năng hữu ích cho tất cả các loại trang web