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