修改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 ...
随机推荐
- 12、K最近邻算法（KNN算法）
一.如何创建推荐系统? 找到与用户相似的其他用户,然后把其他用户喜欢的东西推荐给用户.这就是K最近邻算法的分类作用. 二.抽取特征 推荐系统最重要的工作是:将用户的特征抽取出来并转化为度量的数字,然后 ...
- C语言运算符优先级和结合性
运算符优先级和结合性 优先级 运算符 结合性 ...
- 使用localStorage，sessionStorage，cookie等存储
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. 特点: localStor ...
- 常用操作提高效率 之 for 与in
问题如何而来: 对于刚参加工作的我 批量删除数据通常采用的是前端传递到后台一个对象的id字符串 通过逗号分隔的多个id 或者收的直接是一个id数组 两个原理一样第一个后台要在次使用split(& ...
- 剖析DI
0x00.前言 当我们研究一些晦涩的源码,上网查阅资料的时候,映入眼帘的总有这么些名词:DIP.IOC.DI.DL.IOC容器这些专业名词.如果不懂这些名词背后的含义,我们内心有可能是这样的: 0x0 ...
- vs调试代码的时候断点无法命中
https://blog.csdn.net/xxdddail/article/details/18696399 该链接提供的解决方案主要是如下图片:禁用 图片标记的这个选项即可:
- Linux硬盘性能检测
对于现在的计算机来讲,整个计算机的性能主要受磁盘IO速度的影响,内存.CPU包括主板总线的速度已经很快了. 基础检测方法 1.dd命令 dd命令功能很简单,就是从一个源读取数据以bit级的形式写到一个 ...
- 使用PSSH批量操作Linux服务器
简介 服务器多了,有一个问题就是如何批量快速操作多台服务器,在网上搜到了PSSH工具,试用了一下发现挺好用,推荐给大家. pssh是一个python编写的可以在多台服务器上执行命令的轻量级管理工具,同 ...
- [POJ3585]Accumulation Degree
题面 \(\text{Solution:}\) 有些题目不仅让我们做树型 \(\text{dp}\) ,而且还让我们换每个根分别做一次, 然后这样就愉快的 \(\text{TLE}\) 了,所以我们要 ...
- 九度OJ--1167（C++）
#include <iostream>#include <algorithm>#include <map> using namespace std; int mai ...