Thiết Kế Thẻ Select

 
   
     Chọn Giá Trị

    HTML
    CSS
    Javascript
  

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à hiệu quả sau cuối bạn xem dưới đây nhé :See the Pen Thiết kế thẻ select HTML CSS by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .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é !See the Pen Custom Select by Yusuf ( @ yy ) on CodePen .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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 .Nguồn

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.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ phân phối thêm cho bạn những phong cách thiết kế select có ích dành cho việc tăng trưởng, phong cách thiết kế web và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !