Ngày hôm nay chúng ta cùng nhau đi vào thiết kế thẻ select cho trang web bằng HTML, CSS và Javascript nhé!
Cách Thiết Kế Thẻ Select Bằng HTML, CSS
Đầu tiên chúng ta sẽ đi vào tạo cấu trúc phần tử HTML và nội dung cho thẻ select nhé!
HTML
<h1>Thiết Kế Thẻ Select</h1>
<div class="select">
<select>
<option selected disabled>Chọn Giá Trị</option>
<option value="1">HTML</option>
<option value="2">CSS</option>
<option value="3">Javascript</option>
</select>
</div>
Tiếp theo chúng ta sẽ thiết kẻ thẻ select trên bằng 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 bạn xem dưới đây nhé:
See the Pen Thiết kế thẻ select HTML CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Ví Dụ Khác Về Thẻ Select
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to 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 ở dưới máy tính thì nhấp vào chữ Resources ở 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é!
See the Pen Pure CSS Select Box With Direction Aware Hover Effect by Himalaya Singh (@himalayasingh) on CodePen.
Thiết Kế Pure CSS Select Dropdown
Kết quả bạn xem bên dưới nhé!
See the Pen CSS only Select ( radio + checkbox ) No JS by Aron (@Aoyue) on CodePen.
Cách Tạo CSS Style Select Option Dropdown
Kết quả bạn xem bên dưới nhé!
See the Pen pure css select (supports firefox) by Gijs (@gijs) on CodePen.
Cách Tạo Jquery Select
Kết quả bạn xem bên dưới nhé!
See the Pen Custom select box Jquery Plugin by VJ by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.
Cách Tạo Javascript Select Dropdown Option
Kết quả bạn xem bên dưới nhé!
See the Pen Material Design Select Dropdown by Sam Murphey (@sammurphey) on CodePen.
Cách Tạo Javascript Select Dropdown Với Icon
Kết quả bạn xem bên dưới nhé!
See the Pen Flat selectbox by Peter Geller (@PeterGeller) on CodePen.
Cách Thiết Kế CSS Animate Select Dropdown
Kết quả bạn xem bên dưới nhé!
See the Pen Checkbox Hack Select Dropdown by Jesse (@jessefrye) on CodePen.
Thiết Kế Jquery Select Menu
Kết quả bạn xem bên dưới nhé!
See the Pen Select Menu by Pierre Laurent (@plines) on CodePen.
Thiết Kế CSS3 Select Drop Down
Kết quả bạn xem bên dưới nhé!
See the Pen CSS3 Card Deck Drop Down by Tibor Katelbach (@oceatoon) on CodePen.
Cách Tạo Custom Select Box CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Custom <select> by Christophe CORBALAN (@RedStarZOn) on CodePen.
Thiết Kế HTML5 Select Dropdown
Kết quả bạn xem bên dưới nhé!
See the Pen Custom Select by Yusuf (@yy) on CodePen.
Cách Tạo Select Dropdown JS
Kết quả bạn xem bên dưới nhé!
See the Pen Pretty Select dropdown by j0be (@j0be) on CodePen.
Cách Tạo Jquery Select Option Với Image
Kết quả bạn xem bên dưới nhé!
See the Pen Custom select box by rajeshdn (@RajRajeshDn) on CodePen.
Thiết Kế Select Option CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen CSS only Select by Nicolas Udy (@udyux) on CodePen.
Thiết Kế Select Option Animation CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Select-Boxes by Nipun Paradkar (@radiantshaw) on CodePen.
Cách Tạo Simple Select Dropdown
Kết quả bạn xem bên dưới nhé!
See the Pen Dropdown Select Menu by DimChtz (@dimchtz) on CodePen.
Cách Styling Select Box Bằng CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Styling select box with CSS by Alex (@fabriceleven) on CodePen.
Cách Tạo Select Box Với Social Icon
Kết quả bạn xem bên dưới nhé!
See the Pen Select Box CSS3 by design8383 (@design8383) on CodePen.
Cách Tạo Jquery Select Box
Kết quả bạn xem bên dưới nhé!
See the Pen Select Box Experiment by Maneesh (@maneeshc) on CodePen.
Thiết Kế Select Dropdown Option Hover CSS
Kết quả bạn xem bên dưới nhé!
See the Pen custom select css by saleem (@saleemsemo) on CodePen.
Cách Tạo Multiple Select Dropdown CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen fake stylized select full CSS by Vincent Durand (@onediv) on CodePen.
Cách Custom Select CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Custom select with SASS (no JS) by Jeroen van Beek (@losbeekos) on CodePen.
Cách Custom Select Menu Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Custom Select Menu by Huy Nguyễn Quốc (@huycai102) on CodePen.
Thiết Kế Dropdown Select HTML
Kết quả bạn xem bên dưới nhé!
See the Pen Select Box from Scratch by Siddharth Parmar (@Siddharth11) on CodePen.
Cách Tạo HTML Input Type Select Dropdown
Kết quả bạn xem bên dưới nhé!
See the Pen Styling a dropdown select list by Andy Walpole (@AndyW) on CodePen.
Cách Tạo Jquery Select Dropdown Option
Kết quả bạn xem bên dưới nhé!
See the Pen Image Selection with faux-loading by Lewis Robinson (@lewisvrobinson) on CodePen.
Thiết Kế Select Dropdown Button
Kết quả bạn xem bên dưới nhé!
See the Pen Select menu interaction by Aaron Iker (@aaroniker) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thiết kế select 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 email 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ẻ!