<!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. C语言中关于三目运算符的注意事项

    C语言中常见的条件运算符?:在运算符优先级中排行13.部分时候可以代替if--else语句,使代码更加简洁.但是更容易隐含一些不易觉察的错误. 最近接了一个项目,本来通信协议部分很简单,自己的STM3 ...

  2. 利用原生JS判断组合键

    <script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...

  3. superslide2插件

    地址:http://www.superslide2.com/ 做自适应要注意该宽度和高度 等比缩放

  4. 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  5. 我们一起学Docker（一）

    一.什么是Docker? Docker是一个基于LXC(Linux Container,Linux容器),以及cgroup的上层工具,通过对LXC,cgroup及相关系统命令的封装,使得用户可以非常方 ...

  6. 二、AspNet Core添加EF的基本方法（简略版）：

    _/\__ ---==/ \\ |. \|\ | ) \\\ \_/ | //|\\ / \\\/\\ 1.在Project.json的dependencies选项中添加以下引用: "Mic ...

  7. java8 Lambda表达式的新手上车指南(1)

    背景 java9的一再推迟发布,似乎让我们恍然想起离发布java8已经过去了三年之久,java8应该算的上java语言在历代版本中变化最大的一个版本了,最大的新特性应该算得上是增加了lambda表达式 ...

  8. extjs4 前台导出grid数据 生成excel，数据量大后台无法接收到数据

    最近做的一个web项目使用的是extsj4 框架,需要一个导出excel功能,通过extjs4 自带的导出方法实现.在前台生成excel的代码,form提交传递到后台输出.前台grid数据超过1000 ...

  9. 老司机带你开飞机 一： mssql on linux 安装指导

    通常在本机开发环境中需要搭建所有的服务,还要修改本地的hosts,实在是不胜其烦.如今有了docker,完全不用污染本地环境,且看老司机带你搭建一个asp.net core的开发环境集群.愿你走出虚拟 ...

  10. 蓝桥杯-立方尾不变-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...