<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的更多相关文章

  1. 修改 页面中默认的select样式

    select样式定制: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择 ...

  2. 打造自定Select样式

    打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...

  3. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  4. SELECT样式，兼容IE6

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jqueryMobile中select样式自定义

    要去掉引入的jqueryMobile给下拉框组件的样式,有两种办法. 第一种:全局的去掉所有的下拉框样式: <link rel="stylesheet" href=" ...

  6. select样式重置

                div{                 //用div的样式代替select的样式                 width: 200px;                 ...

  7. CSS效果：CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  8. 通过css属性hack完成select样式美化，并兼容IE

    最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...

  9. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  10. html select options & vue h render

    html select options & vue h render https://developer.mozilla.org/en-US/docs/Web/HTML/Element/opt ...

随机推荐

  1. VS2017发布微服务到docker

    1.本文档以eShopOnContainers.sevices.identity为描述对象,并包含docker for windows的部分配置流程. 2.前置环境:win10操作系统.安装VS201 ...

  2. C语言RL78 serial bootloader和C#语言bootloader PC端串口通信程序

    了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程序). 前段时间完成的hype ...

  3. MYSQL--事务处理（转）

    事务处理在各种管理系统中都有着广泛的应用,比如人员管理系统,很多同步数据库操作大都需要用到事务处理.比如说,在人员管理系统中,你删除一个人员,你即需要删除人员的基本资料,也要删除和该人员相关的信息,如 ...

  4. TFTP & commons-net-3.3.jar

    项目需求:上传文件到服务器,TFTP 了解TFTP http://wenku.baidu.com/link?url=MhRVgIySotFMkm5ar6B71zROPMoqC7cd5cSbKJo2kx ...

  5. Linux系统安装jdk后出现无法执行binary 文件的错误解决

    这是由于jdk版本的问题,针对Linux系统,Oracle提供了 ARM 的32jdk和64位jdk , 但是也提供了类似这样jdk-8u191-linux-i586.tar.gz32或64位的jdk ...

  6. 阿里云SLB上http强制跳转到https问题处理

    背景: 最近一客户有一个需求,需要将外网所有http访问请求强制跳转到https,公网出口使用阿里云SLB,证书放在SLB上,SLB后端实例为ECS(webserver)web服务使用nginx, 网 ...

  7. [USACO18DEC]Cowpatibility(容斥 or bitset优化暴力)

    题面 题意: 给出n个五元组(一个五元组的五个数互不相同),我们称两个五元组不和谐,当且仅当任意元素都不相同,求有多少对五元组不和谐. \(Solution:\) 很容易想到 Ans = 总共对数-和 ...

  8. Tensorflow Estimators

    这篇文章介绍tf.estimator,一个高级TensorFlow API,可以极大简化机器学习编程.Estimators封装了下面几个活动. 训练 评估 预测 出口服务(export for ser ...

  9. struts2 action中获取request session application的方法

    共四种方式: 其中前两种得到的是Map<String,Object>  后两种得到的才是真正的request对象 而Map就是把request对象中的属性取出做成了键值对而已. [方法一] ...

  10. 【WebService】——SOAP、WSDL和UDDI

    WebService的三要素:SOAP.WSDL和UDDI.soap用来描述传递信息的格式,wsdl描述如何访问具体的接口,uddi管理.分发查询WebService. 1.SOAP SOAP Sim ...