修改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 ...

随机推荐

SAN---第二网的概念
网络技术的优缺点:优点:连接能力,超强路由,管理能力,远距离缺点:低速以及高负载,强烈的软件需求,错误检测能力 SAN:storage area network(存储区域网络)--是一种基于光网的特殊 ...
Java8新特性（三）——Optional类、接口方法与新时间日期API
一.Optional容器类这是一个可以为null的容器对象.如果值存在则isPresent()方法会返回true,调用get()方法会返回该对象. 查看结构图可以看到有如下常用方法: of(T)—— ...
步骤1：JMeter 录制脚本接口测试
JMeter 常用测试方法简介 1.下载安装 http://jmeter.apache.org/download_jmeter.cgi 安装JDK,配置环境变量JAVA_HOME. 系统要求:JMet ...
【转】ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了
原文链接:https://www.cnblogs.com/yilezhu/p/9241261.html 引言在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必 ...
adb usage
使用安卓调试及自动化,不可避免的要使用adb,说明看起来很麻烦,进行简单记录,以便时候不时之需. usb连接手机调试就很简单了.首先,在手机端开启usb调试,即点击安卓版本项7次,就可以显示开发者菜单 ...
go 语言模拟百度登录
1.参考网上Python的例子自己写了一个go语言的.这个仅供学习技术参考,为了方便有部分参数直接phantomjs执行js获取,代码基本都有注释,测试打印没有删除,还请见谅! 2.本文参考http: ...
Annoy解析
Annoy是高维空间求近似最近邻的一个开源库. Annoy构建一棵二叉树,查询时间为O(logn). Annoy通过随机挑选两个点,并使用垂直于这个点的等距离超平面将集合划分为两部分. 如图所示,图中 ...
LeetCode 237 ——删除链表中的结点
1. 题目 2. 解答因为给定的只有一个待删除的结点指针,我们并不知道其前面结点,所以需要将待删除结点后面的结点值复制到前面结点去,然后指向其后的第二个结点即可. /** * Definition ...
Tensorflow编程基础之Mnist手写识别实验+关于cross_entropy的理解
好久没有静下心来写点东西了,最近好像又回到了高中时候的状态,休息不好,无法全心学习,恶性循环,现在终于调整的好一点了,听着纯音乐突然非常伤感,那些曾经快乐的大学时光啊,突然又慢慢的一下子出现在了眼前, ...
RabbitMQ 的行为艺术
RabbitMQ 的行为艺术目录简介环境搭建示例一:简单的 Hello World 示例二:发布/订阅模式尝试发现 - 新物种 EasyNetQ 简介 RabbitMQ:一个消息系统,基于 ...

修改select样式，vue select

修改select样式，vue select的更多相关文章

随机推荐

热门专题