[分享]css3手机下拉框

CSS3手机下拉框是一种可以在移动端网页中使用的UI组件，能够让用户更加方便地进行选择操作。本文就来介绍一下如何使用CSS3来创建一个手机下拉框。/HTML/ 请选择 选项1 选项2 选项3 ...

CSS3手机下拉框是一种可以在移动端网页中使用的UI组件，能够让用户更加方便地进行选择操作。本文就来介绍一下如何使用CSS3来创建一个手机下拉框。

/*HTML*/
<div class="select-box">
  <div class="selected-item">请选择</div>
  <ul class="options">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div>

/*CSS*/
.select-box {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.selected-item {
  font-size: 16px;
  line-height: 40px;
  padding: 0 10px;
  color: #666;
}
.select-box:hover {
  cursor: pointer;
}
.options {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 5px #ccc;
  transition: max-height 0.3s ease-in-out;
}
.options.show {
  max-height: 160px;
  overflow-y: scroll;
}
.options li {
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  color: #666;
  cursor: pointer;
}
.options li:hover {
  background-color: #f3f3f3;
} 

以上就是一个简单的CSS3手机下拉框的实现代码，通过CSS的样式、动画等属性，实现了选项的下拉、收起、鼠标悬浮提示等特效，让用户在移动端上进行选择更加自然、轻松。