使用CSS下拉选择框可以让用户方便地选择需要的信息。其中,下拉选择框右侧的箭头图标在用户选择信息时有很大的帮助作用。而一个小小的细节就是当用户将鼠标移到箭头图标上,它的颜色也跟随着变化。/* 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代码结束 */
如上代码所示,通过选择器设置鼠标在下拉选择框上的悬停样式,使其背景颜色和字体颜色都改变,而通过选择器选择箭头的下一个同级元素设置其样式,实现了箭头的变色效果。
粉丝
0
关注
0
收藏
0