css下拉选择框右侧变色

使用CSS下拉选择框可以让用户方便地选择需要的信息。其中，下拉选择框右侧的箭头图标在用户选择信息时有很大的帮助作用。而一个小小的细节就是当用户将鼠标移到箭头图标上，它的颜色也跟随着变化。

/* CSS代码开始 */
select {
  appearance: none;
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 200px;
  background-color: white;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-position: right center;
}

select:hover {
  border-color: #aaa;
}

select:focus {
  outline: none; 
  box-shadow: 0 0 3px #aaa;
}

select option {
  padding: 0.5em;
  background-color: white;
  color: black;
  font-weight: normal;
}

select::-ms-expand {
  display: none;
}

select:hover {
  background-color: #f5f5f5;
  color: #333;
}

select:hover option{
  background-color: #f5f5f5;
  color: #333;
}

select option:checked {
  background-color: #007bff;
  color: white;
}

select:hover ~ .arrow {
  color: #007bff;
}

.arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
}
.arrow:hover {
  color: #007bff;
}
/* CSS代码结束 */ 

如上代码所示，通过选择器设置鼠标在下拉选择框上的悬停样式，使其背景颜色和字体颜色都改变，而通过选择器选择箭头的下一个同级元素设置其样式，实现了箭头的变色效果。