Đầu vào thẻ CSS
Biểu mẫu - biểu mẫu là một phần không thể thiếu trong bất kỳ trang web bất kỳ loại nào. At this post, Quantrimang. com sẽ hướng dẫn bạn cách xây dựng phần giao diện hiển thị của một biểu mẫu cơ bản. Giao diện này có thể khá đẹp mắt với CSS, định dạng như thế này Show Định dạng các phần trong biểu mẫuTrường nhập vàoSử dụng thuộc tính chiều rộng để xác định chiều rộng của trường nhập vào
Code này sẽ áp dụng với tất cả phần tử . Nếu bạn muốn định style cho một kiểu input cụ thể thì có thể sử dụng Attribute Selector:
Thêm phần đệm và lề cho trường nhập
Sử dụng thuộc tính đệm để không gian bên trong trường văn bản rộng rãi hơn. Bạn cũng nên sử dụng thêm lề để không có khoảng thời gian bên ngoài các trường, giúp các trường cách nhau một khoảng nhất định Form no padding and margin Form has both padding and margin Bổ sung thêm thuộc tính box-sizing. hộp viền để cho phép phần đệm và đường viền của hộp nằm trong kích thước phần tử đã được định sẵn Mã đơn giản như thế này để bạn xem thêm, hãy thử thay đổi các giá trị để thấy sự khác biệt Border FormatSử dụng thuộc tính border-radius để thay đổi kích thước và đường viền màu, kết hợp với thuộc tính border-radius để định dạng bo tròn góc cạnh
Ví dụ Nếu bạn chỉ muốn các khung chỉ có đường viền bên dưới, hãy sử dụng thuộc tính border-bottom
color formatSử dụng thuộc tính màu nền để thêm màu nền cho trường nhập và thuộc tính màu để thay đổi màu văn bản
Ví dụ Create the object for entry fieldTheo mặc định, một số trình duyệt sẽ thêm một đường viền màu xanh xung quanh trường khi người dùng nhấp vào để điền thông tin. Bạn có thể loại bỏ điều này bằng cách thêm thuộc tính phác thảo. không ai Nên sử dụng selector. tiêu điểm để tạo ấn tượng cho đầu vào trường, gây chú ý cho người dùng khi họ nhấp chuột vào ô Sử dụng màu nền khácNhấn mạnh bằng đường viền
0 Thêm CSS thuộc tính chuyển tiếp để làm màu đường viền động (mất 0,5 giây để đổi màu khi click chuột vào) 1 Trường nhập vào có biểu tượng/hình ảnhBạn có thể thêm một biểu tượng hoặc hình ảnh vào trường đầu vào, thông thường thì hãy đặt ở đầu để biểu thị mục đích của trường, sử dụng thuộc tính nền-hình ảnh và định vị của nó bằng thuộc tính nền-vị trí. Lưu ý, đặt kích thước đệm bên trái đủ rộng để không có khoảng trống cho biểu tượng. Ví dụ dễ thấy nhất là biểu tượng kính lúp trước mỗi thanh tìm kiếm trên các trang web 2 Ví dụ 3 Hiệu ứng cho ô tìm kiếmĐể tạo một điểm nhấn ở đây, hãy sử dụng thuộc tính chuyển đổi CSS để tạo hiệu ứng, làm ô tìm kiếm kéo dài ra sau khi được người dùng nhấp vào, nhìn khá đẹp mắt 4 Ví dụ 5 Định dạng hộp textareaSử dụng thuộc tính thay đổi kích thước để cố định kích thước hộp văn bản 6 Ví dụ 7 Định dạng biểu mẫu chọn8 9 Định dạng cho nút0 Form type1 Cố gắng thay đổi kích thước trình duyệt, khi màn hình có chiều rộng dưới 600px, hai cột sẽ chồng lên nhau thay vì cạnh nhau Bạn có thể sao chép từng ví dụ để mình thử định dạng từng phần một của biểu mẫu, hoặc lấy thẳng ví dụ về kiểu mẫu cuối cùng để tạo biểu mẫu cho trang web của chính mình. Chúc bạn học CSS thật vui Bài trước. Thuộc tính bộ chọn - Attribute Selector trong CSS Bài tiếp theo. Bộ đếm - Counter trong CSS Thứ Bảy, 20/04/2019 09. 48 5 ★ 4 👨 41. 625 #CSS 0 Bình luận Sắp xếp theo Delete Login to Send Bạn nên đọc
CSS và CSS3
CSS và CSS3
Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm Bản quyền © 2003-2022 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được phép |