修改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 ...
随机推荐
- 按平均成绩从高到低显示所有学生的“数据库”、“企业管理”、“英语”三门的课程成绩，按如下形式显示： 学生ID,,数据库,企业管理,英语,有效课程数,有效平均分
SELECT S# as 学生ID ,(SELECT score FROM SC WHERE SC.S#=t.S# AND C#='004') AS 数据库 ,(SELECT score FROM S ...
- HBase配置和使用
参考官方文档 整体实现框架 图1 以下几个为组成部件 21892 HMaster 22028 HRegionServer 21553 QuorumPeerMain 2366 NameNode 2539 ...
- 各种数据库分页语句整理以及Oracle数据库中的ROWNUM和ORDER BY的区别
.oracle数据库分页 select * from (select a.*,rownum rc from 表名 where rownum<=endrow) a where a.rc>=s ...
- 1176: [Balkan2007]Mokia
1176: [Balkan2007]Mokia 链接 分析 三维偏序问题,CDQ分治论文题. 代码 #include<bits/stdc++.h> using namespace std; ...
- 用Kettle的一套流程完成对整个数据库迁移 费元星
原地址 :http://ainidehsj.iteye.com/blog/1735434 需求: 1.你是否遇到了需要将mysql数据库中的所有表与数据迁移到Oracle. 2.你是否还在使用kett ...
- vs调试代码的时候断点无法命中
https://blog.csdn.net/xxdddail/article/details/18696399 该链接提供的解决方案主要是如下图片:禁用 图片标记的这个选项即可:
- (4)分布式下的爬虫Scrapy应该如何做-规则自动爬取及命令行下传参
本次探讨的主题是规则爬取的实现及命令行下的自定义参数的传递,规则下的爬虫在我看来才是真正意义上的爬虫. 我们选从逻辑上来看,这种爬虫是如何工作的: 我们给定一个起点的url link ,进入页面之后提 ...
- CSS3 ： box-shadow
box-shadow 用于设置边框阴影,语法: box-shadow: h-shadow v-shadow blur spread color inset; -moz-box-shadow: h-sh ...
- ASP NET Core ---POST, PUT, PATCH, DELETE,Model 验证
参照 草根专栏- ASP.NET Core + Ng6 实战:https://v.qq.com/x/page/u0765jbwc6f.html 一.POST 安全性和幂等性 安全性是指方法执行后并不会 ...
- 启动 SQL Server 管理 Studio 在 SQL Server 2008R2 中的错误消息:"无法读取此系统上以前注册的服务器的列表" 解决方法
问题: 服务器被人直接停掉,重启后,发现sqlserver2008r2 启动管理器报错: "无法读取此系统上以前注册的服务器的列表" 如图: 点击继续,进入后: 解决方法: 点击上 ...