纯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代 ...
随机推荐
- vue-router2 使用
VUE-ROUTER2 API http://router.vuejs.org/zh-cn/api/router-link.html 1,安装vue-router npm install vue ...
- 使用JSONObject生成和解析json
1. json数据类型 类型 描述 Number 数字型 String 字符串型 Boolean 布尔型 Array 数组,以"[]"括起来 Object 对象,类似于C中的结构体 ...
- webmagic源码学习(一)
最近工作主要是一些爬虫相关的东西,由于公司需要构建自己的爬虫框架,在调研过程中参考了许多优秀的开源作品,包括webmagic,webcollector,Spiderman等,通过学习这些优秀的源码获益 ...
- 虚拟机下安装ubuntu系统
前期准备工具; 1,Oracle VM VirtualBox虚拟机 下载地址:http://pan.baidu.com/s/1miSaGvm 密码:c3dy 2,ubuntu系统文件 下载地址:htt ...
- 《Thinking in Java》 And 《Effective Java》啃起来
前言 今天从京东入手了两本书,<Thinking in Java>(第四版) 和 <Effective Java>(第二版).都可以称得上是硬书,需要慢慢啃的,预定计划是在今年 ...
- 关于在"a"标签中添加点击事件的一些问题
昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate() ...
- 进击 spring ！！
1.spring简介 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用某一个组件,同时为 J2EE 应用程序开发提供集成 ...
- duboo解析的入口
使用duboo只需要在spring配置文件做如下配置就好: < dubbo:provider timeout= "${default.dubbo.provider.timeout}&q ...
- Telegram学习解析系列(二)：这我怎么给后台传输数据？
写在前面: 在iOS开发的过程中,有很多时候我们都在和数据打交道,最基本的就是数据的下载和上传了,估计很多很多的小伙伴都在用AFNetworking与后台数据打交道,可有没有想过,哪天AFNetwor ...
- (5)微信二次开发 之 XML格式数据解析
1.首先理解一下html html的全名是:HyperText Transfer markup language 超级文本标记语言,html本质上是一门标记(符合)语言,在html里,这些标记是事先定 ...