select input 默认样式修改

Posted 2020-12-23 cdj61

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;
}