zoukankan      html  css  js  c++  java
  • select样式重置

                div{
                    //用div的样式代替select的样式
                    200px;
                    height: 40px;
                    border-radius: 5px;
                    //盒子阴影修饰作用,自己随意
                    box-shadow: 0 0 5px #ccc;
                    position: relative;
                }
                select{
                    //清除select的边框样式
                    border: none;
                    //清除select聚焦时候的边框颜色
                    outline: none;
                    //将select的宽高等于div的宽高
                    100%;
                    height: 40px;
                    line-height: 40px;
                    //隐藏select的下拉图标
                    appearance: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    //通过padding-left的值让文字居中
                    padding-left: 60px;
                }
                //使用伪类给select添加自己想用的图标
                div:after{
                    content: "";
                    14px;
                    height: 8px;
                    background: url(img/xiala.png) no-repeat center;
                    //通过定位将图标放在合适的位置
                    position: absolute;
                    right: 20px;
                    top: 45%;
                    //给自定义的图标实现点击下来功能
                    pointer-events: none;
                }
    --------------------- 
    原文:https://blog.csdn.net/nuanxiasuiyuan/article/details/75663521 
  • 相关阅读:
    Eclipse打jar包的方法
    Eclipse中SVN插件的安装
    无法远程访问 MySql Server
    TCP(Socket基础编程)
    安装淘宝镜像cnpm时出现问题及解决方案
    搭建vue脚手架---vue-cli
    padding和margin设置成百分比
    响应式布局
    响应式网页:用em,rem设置网页字体大小自适应
    url两次编码
  • 原文地址:https://www.cnblogs.com/hilxj/p/10593617.html
Copyright © 2011-2022 走看看