[分享]css下拉框按钮美化

CSS下拉框按钮美化

select{
  /* 将默认的下拉框的样式设置为none */
  appearance: none;
  -webkit-appearance:none;
  -moz-appearance: none;
  /* 自定义下拉框按钮的样式 */
  width: 150px;
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 4px;
  background-color: #fff;
  background-image: linear-gradient(45deg, #007bfe 0%, #00eaff 100%);
  text-align:center;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
 
/* 下拉列表的样式 */
select option{
  padding: 5px;
  border: none;
  background-color: #fff;
  color: #777;
  font-size: 16px;
  cursor: pointer;
}

/* 下拉列表的hover样式 */
select option:hover{
  background-color: #ddd;
}

/* 下拉列表的active样式 */
select option:active{
  background-color: #007bfe;
  color: white;
} 

以上是一个简单的CSS下拉框按钮美化，这段代码可以直接复制到你的CSS文件中使用。其中利用CSS3的appearance属性将默认样式取消，然后自定义按钮样式并设置下拉选项的样式和交互。通过这种方式我们可以自由的调整下拉框的外观，使其更符合我们的网站风格。