纯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代 ...
随机推荐
- nginx学习笔记——http module分析
源码:nginx 1.12.0 nginx由于其高性能.扩充性好等特点在迅速走红,越来越多的公司采用nginx作web服务器.负载均衡.waf等 工作,一些基于nginx ...
- 【Linux Tips】登陆，提示符，别名
1.Linux 的tty界面下的登陆界面设置 看了半天发现,原来每次ctrl+alt+F1进入的tty1刚开始显示的就是初始化的登陆界面,顿时有种想装扮下他的冲动,因为实在是太简单了点,不过我是个喜欢 ...
- Unity属性的封装、继承、方法隐藏
(一)Unity属性封装.继承.方法隐藏的学习和总结 一.属性的封装 1.属性封装的定义:通过对属性的读和写来保护类中的域. 2.格式例子: private string departname; // ...
- java面试题—精选30道Java笔试题解答（一）
下面都是我自己的答案非官方,仅供参考,如果有疑问或错误请一定要提出来,大家一起进步啦~~~ 1. 下面哪些是Thread类的方法() A start() B run() C exit() D getP ...
- Kruskal和Prim算法求最小生成树
Kruskal算法求最小生成树 测试数据: 5 6 0 1 5 0 2 3 1 2 4 2 4 2 2 3 1 1 4 1 输出: 2 3 1 1 4 1 2 4 2 0 2 3 思路:在保证不产生回 ...
- 【渗透测试】PHPCMS9.6.0 任意文件上传漏洞+修复方案
这个漏洞是某司的一位前辈发出来的,这里只是复现一下而已. 原文地址:https://www.t00ls.net/thread-39226-1-1.html 首先我们本地搭建一个phpcms9.6.0的 ...
- crash部分命令用法
Set set [pid | taskp | [-c cpu] | -p] | [crash_variable [setting]] | -v 1.设置要显示的内容,内容一般以进程为单位. Set p ...
- 详解Java反射机制
反射是程序在运行状态下,动态的获取某个类的内部信息的一种操作.例如:类名,包名,所有属性的集合,所有方法的集合,构造方法的集合等.该操作发生在程序的运行时状态,所以编译器管不着有关反射的一些代码,通常 ...
- WPF 杂谈——资源文件
编写一个应用难免要用到WPF本身的控件.不管是WinForm还是网页都会有自己的控件.只是在写法和用法上有所不同而以.而控件命名却离不开那几个单词.所以不用担心判断不出来哪个是按扭,哪个是文本框.举个 ...
- 使用Nodejs进行反向代理
在实际工程开发中,会有前后端分离的需求. 为了平滑的完成前端请求到后端各个独立服务,需要一个中间件实现请求转发的功能,利用Nginx可以实现,在这里,使用nodejs实现一个反向代理服务器. 实际 ...