<!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属性可以调整，欢迎探讨！

纯css实现select下拉框并排显示的更多相关文章

  1. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  2. ThinkPHP中ajax绑定select下拉框无法显示

    html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...

  3. div+css模拟select下拉框

    <!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

  4. jquery 纯JS设置select下拉框，并默认选中第一个

    //html页面<select id="payWay" class="easyui-combobox" name="payWay" s ...

  5. layui下select下拉框不显示或没有效果

    Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...

  6. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  7. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  9. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

随机推荐

  1. Html 经典布局（二）

    经典布局案例(二): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. 【转】JDBC学习笔记(8)——数据库连接池(dbcp&C3P0)

    转自:http://www.cnblogs.com/ysw-go/ JDBC数据库连接池的必要性 一.在使用开发基于数据库的web程序时,传统的模式基本是按一下步骤: 1)在主程序(如servlet/ ...

  3. Linux--shell脚本之文本处理工具

    文本处理工具--grep.sed.awk Bash Shell提供了功能强大的文件处理工具:sed(流编辑器stream editor)和awk,都可使用正则表达式进行模式匹配. 而grep又有助于理 ...

  4. extj6.0写增删查改（1）-------查询

    本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...

  5. border-raduis 在IE8中的兼容性问题

    border-raduis 是css3新增加的属性,我们运用起来也很方便,效果很好,但是在IE8以及之前的ie版本并不支持这个属性,怎么解决这个问题呢? 1.切成背景 这也是我经常用到的方法,虽然说有 ...

  6. 优化单页面开发环境：webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

  7. Docker学习总结（一）

    <认识Docker> 不定期更新~~~~~~~ 历史区别: 13年之前:网络大多使用"协议栈堆叠"的形式进行开发,需要部署单一专有的服务器进行操作.包括(中间件,运行时 ...

  8. Start to write blogs 【开始写博客】

    I used to be lazy and wrote no blogs. I used to live at leisure and wasted opportunity. Time flies, ...

  9. java中构造方法和this，static关键字

    构造方法: 构造方法是一种特殊的方法,用于创建该类的对象,对对象的数据进行初始化 格式如下: [修饰符] 类名(形参列表){ 方法体 } 特点 A:方法名和类名相同  B:没有返回值类型,连void都 ...

  10. Bootstrap之折叠（Collapse）插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...