Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Select HTML5 CSS3 Và 27 Ví Dụ Thực Tế Trong Website

Cách Tạo Select HTML5 CSS3 Và 27 Ví Dụ Thực Tế Trong Website


Ngày 24 Tháng 1 Năm 2021

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.

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

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

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

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

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

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

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

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

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

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

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.

Nguồn

Thiết Kế HTML5 Select Dropdown

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ẽ 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ẻ!