时间:2021-07-01 10:21:17 帮助过:50人阅读
这个方法看起来很简单,你可以根据自已的需求去设置样式(推荐课程:css视频教程)
代码如下:
HTML:
- <div class="select-style">
- <select>
- <option value="city1">合肥</option>
- <option value="city2">南京</option>
- <option value="city3">芜湖</option>
- <option value="city4">杭州</option>
- </select></div>
CSS:
- .select-style {
- border: 1px solid #ccc;
- width: 120px;
- border-radius: 3px;
- overflow: hidden;
- background: #fafafa url("image/greatwall.jpg") no-repeat 90% 50%;
- }
- .select-style select {
- padding: 5px 8px;
- width: 130%;
- border: none;
- box-shadow: none;
- background: transparent;
- background-image: none;
- -webkit-appearance: none;
- color: lightblue;
- }
- .select-style select:focus {
- outline: none;
- }
效果如下:
以上就是css实现自定义选择框的技巧方法(代码示例)的详细内容,更多请关注Gxl网其它相关文章!