纯css实现select下拉框并排显示
<!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下拉框并排显示的更多相关文章
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- ThinkPHP中ajax绑定select下拉框无法显示
html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...
- div+css模拟select下拉框
<!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...
- jquery 纯JS设置select下拉框，并默认选中第一个
//html页面<select id="payWay" class="easyui-combobox" name="payWay" s ...
- layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
- css配合js模拟的select下拉框
css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- 好看的Select下拉框是如何制造的
现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...
随机推荐
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（十）数据层优化-整合druid
druid介绍 这是druid对自己的介绍: Druid是阿里开源的一个数据库连接池技术,号称自己是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.B ...
- Unity属性的封装、继承、方法隐藏
(一)Unity属性封装.继承.方法隐藏的学习和总结 一.属性的封装 1.属性封装的定义:通过对属性的读和写来保护类中的域. 2.格式例子: private string departname; // ...
- Linux-粘滞位的使用
粘滞位(Stickybit),又称粘着位,是Unix文件系统权限的一个旗标.最常见的用法在目录上设置粘滞位, 也只能针对⽬录设置,对于⽂件⽆效.则设置了粘滞位后,只有目录内文件的所有者或者root才可 ...
- 【Android N_启示录】
[啰嗦~]自从接触Android以来,大概也有3年时间,基本是跟着项目走,做过的东西不算多也不算少,从当初做上层应用到系统级应用,再到Framework,以及后来接触功耗.性能优化等需求.给我的感觉就 ...
- stm32之USART学习
首先,我是看着这位博主的文章受到的启发,进而加深了自己对USART的理解.下面是自己改装并实验过的程序. 原文:http://www.cnblogs.com/greatwgb/archive/2011 ...
- 局域网内补丁更新80072EE2错误
在公网中,80072ee2通常是在进行自动更新时遇到的连接性错误.通常由于三防杀毒软件或者浏览器,代理服务器设置不正确而导致的.那么如果是在局域网中遇到该问题,该如何解决呢? 错误截图: 1.首先确认 ...
- AutoFac学习摘要
依赖注入(控制反转)常见的依赖注入工具:AutoFac,Spring.Net,Unity等依赖注入的方式:1.通过构造函数进行注入2.通过属性进行注入 注意:在项目中AutoFac的注入有两次,第一次 ...
- poj2481 Cows 树状数组
题目链接:http://poj.org/problem?id=2481 解题思路: 这道题对每组数据进行查询,是树状数组的应用.对于二维的树状数组, 首先想到排序.现在对输入的数据按右值从大到小排序, ...
- hdu1372 Knight Moves BFS 搜索
简单BFS题目 主要是读懂题意 和中国的象棋中马的走法一样,走日字型,共八个方向 我最初wa在初始化上了....以后多注意... 代码: #include <iostream> #incl ...
- 深入浅出新一代云网络——VPC中的那些功能与基于OpenStack Neutron的实现（一）
VPC的概念与基于vxlan的overlay实现很早就有了,标题中的"新"只是一个和传统网络的相对概念.但从前年开始,不同于以往基础网络架构的新一代SDN网络才真正越来越多的走进国 ...