Trang chủ
CSS
Biểu mẫu CSS
Tryit: Làm sinh động độ rộng của trường nhập tìm kiếm
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> input[type=text] { width: 130px; kích thước hộp: hộp viền; đường viền: 2px liền khối #ccc; bán kính đường viền: 4px; cỡ chữ: 16px; màu nền: trắng; hình nền: url('searchicon.png'); vị trí nền: 10px 10px; lặp lại nền: không lặp lại; phần đệm: 12px 20px 12px 40px; chuyển tiếp: chiều rộng 0,4s dễ dàng ra vào; } đầu vào[loại=văn bản]:tiêu điểm { chiều rộng: 100%; } </style> </head> <body> <h2>Tạo hiệu ứng chiều rộng của đầu vào tìm kiếm</h2> <form> <input type="text" name="search" placeholder="Search.."> </form > </body> </html>