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

随机推荐

XStream轻松转换xml和java对象
首先引入所需的jar: xstream-1.4.9.xpp3_min-1.1.4c.dom4j-1.6.1, 或用maven管理jar包时在pom.xml中添加: <!-- https://mv ...
Linux/CentOS防CC攻击脚本
#!/bin/sh cd /var/log/httpd/ cat access_log|awk > a cp /dev/null access_log cp /dev/null error_lo ...
js复制粘贴事件
一.相应的事件 copy: 在发生复制操作时触发. beforecut: 在发生剪切操作前触发. cut: 在发生剪切操作时触发. beforepaste: 在发生粘贴操作前触 ...
C#的内存管理
栈的填充方式是从高到低,高数位到低数位的填充堆的填充方式是从低向高,低数位到高数位的填充内存堆上没有被栈引用的东西,才会被垃圾回收器回收. GC垃圾自动回收会重新排列堆里面的内存占用,自动回收运行 ...
Jquery append()总结（一）转载
转载自:http://dushanggaolou.iteye.com/blog/1173457 append(content) /** * 向每个匹配的元素内部追加内容. * 这个操作与对指定的元素 ...
swarm 服务器安装
apt install docker.io-----------------------配置加速器.私有仓库地址---------------------mkdir -p /etc/dockertee ...
tarball
环境:Linux系统命令:tar 关键:tar打包出来的文件有没有进行压缩所得到的文件称谓不同仅是打包,得到的文件我们称为tarfile 包含压缩,得到的文件我们称为tarball
并查集——poj1308（并查集延伸）
题目链接:Is It A Tree? 题意:给你一系列形如u v的点对(u v代表一条由u指向v的有向边),请问由给你的点构成的图是不是一棵树? 树的特征:①每个节点(除了根结点)只有一个入度:②只有 ...
NO3——BFS
#include <stdio.h> #include <string.h> #include <queue> using namespace std; struc ...
Unity UGUI 图片轴对称效果减少资源
制作UI的过程中,为了节省资源,对称的图一般美术切一半给我们手动拼图有时会出现拼接处出现裂缝或重叠调整大小时也不方便得一块一块调整所以就用BaseMeshEffect 的ModifyMesh ...

修改select样式，vue select

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

随机推荐

热门专题