CSS下拉框按钮美化select{ /* 将默认的下拉框的样式设置为none */ appearance: none; -webkit-appearance:none; -moz-appearance
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属性将默认样式取消,然后自定义按钮样式并设置下拉选项的样式和交互。通过这种方式我们可以自由的调整下拉框的外观,使其更符合我们的网站风格。
粉丝
0
关注
0
收藏
0