纯css实现select下拉框并排显示

最新推荐文章于 2024-05-24 11:22:00 发布

daruanzai3165

最新推荐文章于 2024-05-24 11:22:00 发布

阅读量1.6k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/hcxy/p/6821139.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        select {
            text-align: center;
            height: 50px;
            overflow: hidden;
            border: none;
            outline: none;
            background: #eee;
            border-radius: 10px;
        }
        option{
            width: 150px;
            height: 40px;
            font-size: 20px;
            display: inline-block;
            border-radius: 10px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <select name="toppings" multiple="multiple">
    　　<option value="mushrooms"  selected="selected">mushrooms</option>
    　　<option value="greenpeppers">green peppers</option>
    </select>
</body>
</html>

项目需求：让option选项并排显示，同时隐去select那丑陋的默认选择小三角

总结：网上纯css改默认样式的方法看了一些，基本都是一个套路，而且相互抄袭，这倒没什么，关键是试了一下，不起作用。还有一个套路就是重新布局模拟select，因为项目是二次开发，为避免修改前后台表单验证，没有采用这个方案。而反观以上代码，功能实现了，但有个缺点就是默认选中背景色和点击选中背景色没法调整，不知道是否有相应css属性可以调整，欢迎探讨！

转载于:https://www.cnblogs.com/hcxy/p/6821139.html

daruanzai3165

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实现select下拉框并排显示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; ...
复制链接

扫一扫