select文字右对齐样式

最近在用原生的select时，需要文字右对齐还要有图标
PC上效果图如下

select.png

注意到select无边框，文字右对齐，图标自定义

<select class="select-order" v-model="selectclock">
                    <option v-for="item in arrayclock" :value="item.key">{{item.name}}</option>
                </select>

CSS样式

.select-order{
    float: right;
    padding:0 25px 0 0;
    width: 200px;
    height: 30px;
    background-color: transparent;
    border: 0;
    outline: none;
    text-align: right;
    direction: rtl;
    appearance:none;
    background: url(../../../static/icon_select.png) no-repeat right;
    background-size: 25px 25px;
}
select option{
    direction: ltr;
}

文字右对齐由direction属性控制，
自定义图标先设置
appearance:none;
再设置背景图片属性和尺寸，
对了，别忘了outline:none;