Thêm các lớp sau vào tệp css của bạn, sau đó gọi lại các lớp này theo các yếu tố bạn muốn hoặc bạn có thể sử dụng cho cả trang web. Tuy hơi phiền vì phải tùy chỉnh các trình duyệt nhưng Selection rất nhỏ gọn và độ đẹp của nó nếu được sử dụng đúng cách sẽ rất tuyệt vời
Hôm nay chúng ta cùng nhau vào thẻ thiết kế chọn cho trang web bằng HTML, CSS và Javascript nhé
Cách Thiết Kế Thẻ Chọn Bằng HTML, CSS
Đầu tiên chúng ta sẽ đi vào việc tạo cấu trúc phần tử HTML và nội dung cho thẻ select nhé
HTML
Thiết Kế Thẻ Select
Chọn Giá Trị
HTML
CSS
Javascript
Tiếp theo chúng ta sẽ thiết lập kẻ thẻ select trên các thuộc tính trong CSS nhé
CSS
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
margin: 0 0 0.25em;
color:black;
}
/* Thiết kẻ thẻ select */
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background: DeepSkyBlue;
background-image: none;
}
.select {
position: relative;
display: flex;
width: 20em;
height: 3em;
line-height: 3;
background: #fff;
overflow: hidden;
border-radius: .25em;
}
select {
flex: 1;
padding: 0 .5em;
color: #fff;
cursor: pointer;
}
/* thiết kế dấu mũi tên */
.select::after {
content: '25BC';
position: absolute;
top: 0;
right: 0;
padding: 0 1em;
background: DodgerBlue;
cursor: pointer;
pointer-events: none;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
color: white;
}
/* Hiệu ứng hover */
.select:hover::after {
color: Gainsboro;
}
Và kết quả cuối cùng các bạn xem bên dưới nhé
Xem thẻ Thiết kế bút chọn HTML CSS của haycuoilennao19 [@haycuoilennao19] trên CodePen
Nguồn
Các Ví Dụ Khác Về Thẻ Chọn
Trước khi đi vào ví dụ, mình có một số lưu ý sau là để xem kết quả rõ ràng hơn bạn chuyển sang chế độ màn hình 0. 5x, 0. 25x hay if it does not show, you please memory minh mình is con people in Codepen new see was nhé. Nếu file là SCSS thì bạn có thể convert sang CSS ở đây nhé. SCSS sang CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé. Pug sang HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở bên dưới máy tính, hãy nhấp vào chữ Resources ở bên dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Cách Tạo Hiệu Ứng Hover CSS Select Box
Kết quả bạn xem bên dưới nhé
Xem Pen Pure CSS Select Box With Direction Aware Hover Effect của Himalaya Singh [@himalayasingh] trên CodePen
Nguồn
Thiết kế Pure CSS Select Dropdown
Kết quả bạn xem bên dưới nhé
Xem Pen CSS only Select [ radio + checkbox ] No JS by Aron [@Aoyue] trên CodePen
Nguồn
Cách tạo CSS Style Select Option Dropdown
Kết quả bạn xem bên dưới nhé
Xem Pen pure css select [hỗ trợ firefox] của Gijs [@gijs] trên CodePen
Nguồn
Cách Tạo Jquery Select
Kết quả bạn xem bên dưới nhé
Xem hộp lựa chọn Pen Custom Plugin Jquery của VJ bởi Vijaya Kumar Vulchi [@vulchivijay] trên CodePen
Nguồn
Cách tạo Javascript Select Dropdown Option
Kết quả bạn xem bên dưới nhé
Xem Danh sách thả xuống Chọn vật liệu thiết kế bút của Sam Murphey [@sammurphey] trên CodePen
Nguồn
Cách tạo Javascript Select Dropdown With Icon
Kết quả bạn xem bên dưới nhé
Xem hộp chọn Pen Flat của Peter Geller [@PeterGeller] trên CodePen
Nguồn
Cách Thiết Kế CSS Animate Select Dropdown
Kết quả bạn xem bên dưới nhé
Xem Hack Checkbox Pen Select Dropdown của Jesse [@jessefrye] trên CodePen
Nguồn
Menu Thiết kế Jquery Select
Kết quả bạn xem bên dưới nhé
Xem Menu chọn bút của Pierre Laurent [@plines] trên CodePen
Nguồn
Thiết kế CSS3 Select Drop Down
Kết quả bạn xem bên dưới nhé
Xem Pen CSS3 Card Deck Drop Down của Tibor Katelbach [@oceatoon] trên CodePen
Nguồn
Cách tạo Custom Select Box CSS
Kết quả bạn xem bên dưới nhé
See the Pen Custom by Christophe CORBALAN [@RedStarZOn] on CodePen.
Nguồn
Thiết kế HTML5 Select Dropdown
Kết quả bạn xem bên dưới nhé
Xem Pen Custom Select của Yusuf [@yy] trên CodePen
Nguồn
Cách tạo Select Dropdown JS
Kết quả bạn xem bên dưới nhé
Xem trình đơn thả xuống Pen Pretty Select của j0be [@j0be] trên CodePen
Nguồn
Cách Tạo Jquery Select Option With Image
Kết quả bạn xem bên dưới nhé
Xem hộp chọn Tùy chỉnh bút của rajeshdn [@RajRajeshDn] trên CodePen
Nguồn
Thiết Kế Select Option CSS3
Kết quả bạn xem bên dưới nhé
Xem Chỉ chọn CSS bằng bút của Nicolas Udy [@udyux] trên CodePen
Nguồn
Design Select Option Animation CSS
Kết quả bạn xem bên dưới nhé
Xem Hộp chọn bút của Nipun Paradkar [@radiantshaw] trên CodePen
Nguồn
Cách tạo danh sách thả xuống chọn đơn giản
Kết quả bạn xem bên dưới nhé
Xem Menu thả xuống chọn bút của DimChtz [@dimchtz] trên CodePen
Nguồn
Cách Styling Select Box Bằng CSS
Kết quả bạn xem bên dưới nhé
Xem hộp chọn Pen Styling với CSS của Alex [@fabriceleven] trên CodePen
Nguồn
Cách Tạo Hộp Chọn Với Biểu tượng Xã hội
Kết quả bạn xem bên dưới nhé
Xem Hộp chọn bút CSS3 của design8383 [@design8383] trên CodePen
Nguồn
Cách Tạo Jquery Select Box
Kết quả bạn xem bên dưới nhé
Xem Thử nghiệm hộp chọn bút của Maneesh [@maneeshc] trên CodePen
Nguồn
Design Select Dropdown Option Hover CSS
Kết quả bạn xem bên dưới nhé
Xem Bút tùy chỉnh chọn css của saleem [@saleemsemo] trên CodePen
Nguồn
Cách tạo CSS3 thả xuống nhiều lựa chọn
Kết quả bạn xem bên dưới nhé
Xem Pen fake CSS select full CSS của Vincent Durand [@onediv] trên CodePen
Nguồn
Cách tùy chỉnh chọn CSS
Kết quả bạn xem bên dưới nhé
Xem Pen Custom select with SASS [no JS] của Jeroen van Beek [@losbeekos] trên CodePen
Nguồn
Cách Custom Select Menu Jquery
Kết quả bạn xem bên dưới nhé
Xem Menu tùy chọn bút của Huy Nguyễn Quốc [@huycai102] trên CodePen
Nguồn
Thiết kế thả xuống Select HTML
Kết quả bạn xem bên dưới nhé
Xem Hộp chọn bút từ đầu của Siddharth Parmar [@Siddharth11] trên CodePen
Nguồn
Cách tạo Loại đầu vào HTML Select Dropdown
Kết quả bạn xem bên dưới nhé
Xem danh sách lựa chọn thả xuống Pen Styling của Andy Walpole [@AndyW] trên CodePen
Nguồn
Cách tạo Jquery Select Dropdown Option
Kết quả bạn xem bên dưới nhé
Xem Lựa chọn hình ảnh bút với tải giả của Lewis Robinson [@lewisvrobinson] trên CodePen
Nguồn
Thiết Kế Select Dropdown Button
Kết quả bạn xem bên dưới nhé
Xem tương tác menu Chọn bút của Aaron Iker [@aaroniker] trên CodePen
Nguồn
Tổng kết
Qua đây mình mong bài viết sẽ cung cấp thêm cho các bạn những designer chọn lọc hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi mail mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ