select下拉框option的样式修改
select原样式:
进行样式修改后的样式:
附上修改代码:
//select外面必须包裹一个div,用来覆盖select原有的样式
<div class="option">
<select name="">
<option value=" ">筛选实验类型</option>
<option value="实验1">实验1</option>
<option value="实验2">实验2</option>
</select>
</div> css: .option{
/*用div的样式代替select的样式*/
margin: 100px;
width: 140px;
height: 40px;
/*border-radius: 5px;*/
/*盒子阴影修饰作用,自己随意*/
/* box-shadow: 0 0 5px #ccc;*/
border: 1px solid #cccccc;
position: relative;
}
.option select{
/*清除select的边框样式*/
border: none;
/*清除select聚焦时候的边框颜色*/
outline: none;
/*将select的宽高等于div的宽高*/
width: 100%;
height: 40px;
line-height: 40px;
/*隐藏select的下拉图标*/
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/*通过padding-left的值让文字居中*/
padding-left: 20px;
}
/*使用伪类给select添加自己想用的图标*/
.option:after{
content: "";
width: 14px;
height: 8px;
background: url(../assets/arrow-down.png) no-repeat center;
/*通过定位将图标放在合适的位置*/
position: absolute;
right: 20px;
top: 41%;
/*给自定义的图标实现点击下来功能*/
pointer-events: none;
}
但是有个问题;option的样式没办法修改;我各种百度搜索,没有搜索出如何修改其样式;
因为option是html固有元素;因而无论怎么修改在浏览器上都是不起作用的。
想修改option样式,只能通过div ul li模拟select功能;
我项目是用vue做的,所以我基于vue对select用div li进行改造。
用div ul li做的select下来框:
实现的代码如下:
<div class="divInput">
<div class="input" @click="openValue">
<input v-model="value" type="text" placeholder="筛选实验类型">
<img src="../assets/arrow.png" alt="">
</div>
<div class="list" v-show="show">
<ul>
<li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index">{{ item.name }}</li>
</ul>
</div>
</div> js: export default {
name: 'javascript',
data(){
return{
tableData:[
{
'name':111
},
{
'name':222
},
{
'name':333
}, {
'name':444
}
],
show:false,
value:''
}
},
methods: {
openValue(){
this.show=!this.show;
},
getvalue(index,item){
this.value=item.name;
this.show=false;
},
}, css: .divInput{
margin: 200px;
}
ul li{
list-style: none;
}
.input{
width: 140px;
height: 40px;
line-height: 40px;
padding-left: 10px;
border: 1px solid #cccccc;
position: relative;
}
.input input{
border: none;
outline: none;
width: 90%;
}
.input img{
position: absolute;
right: 34px;
top: 48%;
}
.list{
width: 150px;
border: 1px solid #cccccc;
overflow: hidden;
}
.list ul li{
width: 100%;
height: 30px;
cursor: pointer;
line-height: 30px;
padding-left: 10px;
}
.list ul li:hover{
background-color: #cccccc;
}
这样就可以完成对select样式的修改了。
嘿嘿,开心!
select下拉框option的样式修改的更多相关文章
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- 自定义样式的select下拉框深入探索
第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
- 点击select下拉框获取option的属性值
select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...
- 去除select下拉框默认样式
去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #; /*很关键:将默认的select选 ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- javascript遍历select下拉框判断其中值是否与指定值相等
用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...
- 带搜索框的select下拉框
利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/ ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
随机推荐
- javaScript之基础介绍
前言一:javascript历史背景介绍 布兰登 • 艾奇(Brendan Eich,1961年-),1995年在网景公司,发明的JavaScript. 一开始JavaScript叫做LiveScri ...
- 在IDEA中用Maven打包大项目时失败问题
今天在完成公司里某项功能开发时,准备用Maven打包,后来在打包的过程中报错:OutOfMemoryError.如下图: 后来经过查找资料,发现可以配置一下Maven的参数即可解决此问题. 配置参数为 ...
- python基础(20):序列化、json模块、pickle模块
1. 序列化 什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 1.1 为什么要有序列化 为什么要把其他数据类型转换成字符串?因为能够在网络上传输的只能是bytes,而能够 ...
- java基础(7):自定义类、ArrayList集合
1. 引用数据类型(类) 1.1 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,如使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好 ...
- Flask 教程 第三章:Web表单
本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你如何使用Web表单. 在第二章中 ...
- 高强度学习训练第十一天总结:Class文件结构(二)
常量池 可以理解为Class文件之中的资源仓库,他是Class文件结构中与其他项目关联最多的数据类型,也是占用Class文件空间最大的数据项目之一 访问标志 在常量池结束后,紧接着的俩个字节代表访问标 ...
- Ubantu搭建虚拟环境
配置虚拟环境 Ubantu16.0.4 1.安装python虚拟环境 sudo apt-get install virtualenv 2.vrtaulenvwrapper是virtualenv的扩展包 ...
- Apache—给一个站点绑定多个域名
前提简介: ServerAdmin:Apache服务管理员通知邮箱地址,如果有真实的邮箱地址也可以设置此值. ServerName:是服务的名字,只能填写一个域名. ServerAlias:serv ...
- jacoco统计自动化代码覆盖率
jacoco统计自动化代码覆盖率 1. 简介 1.1. 什么是Jacoco Jacoco是一个开源的代码覆盖率工具,可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件,也可以 ...
- SpringCloud学习笔记(十、SpringCloud Sleuth)
目录: 什么是SpringCloud Sleuth 为什么使用SpringCloud Sleuth 如何使用SpringCloud Sleuth 什么是SpringCloud Sleuth: Spri ...