[分享]css下拉框怎么做

如果你想制作一个下拉框，那么CSS就是一个非常好的选择。下面我将介绍一些制作下拉框的CSS代码：/ 设置下拉框的位置和大小 / select { width: 200px; height: 30px;...

如果你想制作一个下拉框，那么CSS就是一个非常好的选择。下面我将介绍一些制作下拉框的CSS代码：

/* 设置下拉框的位置和大小 */
select {
  width: 200px;
  height: 30px;
  margin: 0 10px 10px 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 设置下拉框中的选项样式 */
select option {
  color: #000;
  background: #fff;
  font-size: 16px;
}

/* 当下拉框展开时，设置选项的样式 */
select:focus {
  outline: none;
  box-shadow: 0 0 5px #ccc;
}

/* 设置下拉框展开时选项列表的样式 */
select option:focus {
  color: #fff;
  background: #428bca;
}

/* 指定展开按钮的样式，可以自定义样式 */
select::-ms-expand {
  display: none;
}

select::-webkit-scrollbar {
  width: 10px;
}

select::-webkit-scrollbar-track {
  background: #f1f1f1;
}

select::-webkit-scrollbar-thumb {
  background: #888;
} 

以上CSS代码中，使用了一些常用的CSS属性来设置下拉框的样式。其中，select是下拉框整体的样式，select option是选项的样式，select:focus是下拉框展开时的样式。对于展开按钮的样式，可以使用::-ms-expand或::-webkit-scrollbar进行设置。

总之，制作下拉框并不难，只需要稍微花费一些时间来学习一下CSS就可以了。如果你想更加个性化地制作下拉框，还可以自己定义CSS样式。