修改select样式，vue select
<style>
.selectbox{ width: 200px; display: inline-block; overflow-x: hidden; height: 28px; line-height: 28px; font-size: 0; background:#fff url(images/selectbg.png) right center no-repeat; border: 1px solid #dcdbdb; vertical-align: middle;}
.selectbox select{cursor: pointer; padding: 0 8px; height: 28px; line-height: 28px; font-size: 12px; width:118%; padding-right: 18%; background:none; border: none;}
.selectbox select option{ padding:5px;}
</style> <div class="selectbox">
<select>
<option>默认值</option>
<option>选项之</option>
</select>
</div>
<style>
.selectbox select {
padding: 6px 30px 6px 15px;
background: #fff;
width: 440px;
height: 30px;
text-align: left;
vertical-align: middle;
border: 1px solid #94c1e7;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 3px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: non
cursor: pointer;
outline: none;
} /*LABEL FOR SELECT*/
label.selectbox {
position: relative;
display: inline-block;
} /*DOWNWARD ARROW (25bc)*/
label.selectbox::after {
content: "\25bc";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
background: #94c1e7;
color: #2984ce;
-moz-border-radius: 0 6px 6px 0;
-webkit-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
pointer-events: none;
}
</style> <label class="selectbox">
<select name="" id="">
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
<option value="赵六">赵六</option>
</select>
</label>
<!Doctype>
<html>
<head>
<meta charset="utf-8">
<style>
select {
width: 185pt;
height: 40pt;
line-height: 40pt;
padding-right: 20pt;
text-indent: 4pt;
text-align: left;
vertical-align: middle;
border: 1px solid #94c1e7;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: SimHei;
font-size: 18pt;
font-weight: 500;
color: RGBA(102, 102, 102, 0.7);
cursor: pointer;
outline: none;
} /*LABEL FOR SELECT*/
label {
position: relative;
display: inline-block;
} /*DOWNWARD ARROW (25bc)*/
label::after {
content: "\25bc";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20pt;
line-height: 40pt;
vertical-align: middle;
text-align: center;
background: #94c1e7;
color: #2984ce;
-moz-border-radius: 0 6px 6px 0;
-webkit-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
pointer-events: none;
}
</style>
</head>
<body>
<div id="app">
<div class="selectbox">
<label>
<select v-model="selected">
<option v-for="(item,index) of options" :value="item.value">{{item.value}}</option>
</select>
</label>
<p>您选择了：<span>{{selected}}</span></p>
</div>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
options: [{
text: 'One',
value: 'A'
}, {
text: 'Two',
value: 'B'
}, {
text: 'Three',
value: 'C'
}],
selected:'B'
}
});
</script>
</body>
</html>
修改select样式，vue select的更多相关文章
- 修改 页面中默认的select样式
select样式定制: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择 ...
- 打造自定Select样式
打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- SELECT样式，兼容IE6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jqueryMobile中select样式自定义
要去掉引入的jqueryMobile给下拉框组件的样式,有两种办法. 第一种:全局的去掉所有的下拉框样式: <link rel="stylesheet" href=" ...
- select样式重置
div{ //用div的样式代替select的样式 width: 200px; ...
- CSS效果：CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- 通过css属性hack完成select样式美化，并兼容IE
最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- html select options & vue h render
html select options & vue h render https://developer.mozilla.org/en-US/docs/Web/HTML/Element/opt ...
随机推荐
- [拉格朗日反演][FFT][NTT][多项式大全]详解
1.多项式的两种表示法 1.系数表示法 我们最常用的多项式表示法就是系数表示法,一个次数界为\(n\)的多项式\(S(x)\)可以用一个向量\(s=(s_0,s_1,s_2,\cdots,s_n-1) ...
- 北京Uber优步司机奖励政策（3月25日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 两个完整的jquery slide多方面滑动效果实例
实例1,需要引用jquery-ui.js <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- java 判断上午/下午
//结果为“0”是上午 结果为“1”是下午 public class GregorianTest { public static void main(String args[]) { Gregoria ...
- 怎么使用pipenv管理你的python项目
原文链接:https://robots.thoughtbot.com/how-to-manage-your-python-projects-with-pipenv 翻译者:Jiong 在thought ...
- 命令行编译 WPF
在开发调试代码 WPF 时,经常需要在修改完成代码后,点击 Rebuild,然后到指定文件夹下点击打开对应的 .exe 验证程序是否正确, 可以通过以下命名实现修改程序后,点击一个 .bat 文件,直 ...
- P4332三叉神经树
题面 \(Solution\) 通过模拟,我们会发现每次修改 \(x\),只会改变从 \(x\) 向上一段连续的链的输出. 例如将 \(x\) 点从 \(0\) 改为 \(1,\) 那么它会影响从它向 ...
- POJ 2229 递推
Farmer John commanded his cows to search for different sets of numbers that sum to a given number. T ...
- [Node] Agenda 中文文档 定时任务调度系统[基础篇]
Agenda简介 使用步骤概述 步骤详述 初始化 定义任务 参数说明: 配置任务 参数说明 设置监听 注意事项 Agenda简介 Agenda是一个定时任务管理模块,它将node中的定时任务存储在数据 ...
- Go基础篇【第4篇】: 内置库模块 bufio
bufio包实现了有缓冲的I/O.它包装一个io.Reader或io.Writer接口对象,创建另一个也实现了该接口,且同时还提供了缓冲和一些文本I/O的帮助函数的对象. 即:为了解决CPU与磁盘IO ...