select input 默认样式修改

Posted cdj61

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了select input 默认样式修改相关的知识,希望对你有一定的参考价值。

1、select

select {
    /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
    border: none;
    outline: none;
    background: none;
    /*很关键:将默认的select选择框样式清除*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    direction: rtl;
    /*文字居右显示 对应option添加属性*/
    text-align: right;

    text-align-last: center;
    /*文字居中显示*/

    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
    /*为下拉小箭头留出一点位置,避免被文字覆盖*/
    padding-right: 14px;
}

select option {
    direction: ltr;
    /*文字居右显示 与select对应存在*/
    text-align: right;
}
/* 下拉箭头伪元素 */
.selectbg:after {
    content: ‘‘;
    z-index: 10;
    width: 0.65em;
    height: 0.65em;
    position: absolute;
    right: 0;
    top: 16px;
    border-left: 1px solid #a9a9a9;
    border-bottom: 1px solid #a9a9a9;
    margin-top: 0.02em;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

2、input

.ul li input::-webkit-input-placeholder {
    color: #ccb595;
}

.ul li input:-moz-placeholder {
    color: #ccb595;
}

.ul li input:-ms-input-placeholder {
    color: #ccb595;
}

.ul li textarea::-webkit-input-placeholder {
    color: #ccb595;
}

.ul li textarea:-moz-placeholder {
    color: #ccb595;
}

.ul li textarea:-ms-input-placeholder {
    color: #ccb595;
}

 

以上是关于select input 默认样式修改的主要内容,如果未能解决你的问题,请参考以下文章

select input 默认样式修改

修改input默认样式

React 项目中修改 Ant Design 的默认样式(Input Checkbox 等等

修改默认input(file)的样式

改变form里面input,textarea.select等的默认样式

uni-app radio的样式如何修改