定位背景重复属性

Question

I have this drop-down button, which is styled using this css:

.styled-select {
        background: url(resources/img/selector.png) no-repeat right;
        background-color: white;
        width: 305px;
        height: 42px;
        position: relative;
        margin: 0 auto;
        box-shadow: 0 2px 2px 0 #C2C2C2;
    }

The result is shown in this picture:

As you see, using no-repeat right made the selector.png go to the right end. I want to know if there is any solution to position that arrow in order to shift it a little to the left as in this picture:

Answer 1

尝试像这样更改background-position属性value ：

background: url(resources/img/selector.png) no-repeat top 96%;

Answer 2

You have to use right propety like this

.styled-select {
    background: url(resources/img/selector.png) no-repeat right;
    background-color: white;
    width: 305px;
    height: 42px;
    position: relative;
    padding:10px;
    margin: 0 auto;
    box-shadow: 0 2px 2px 0 #C2C2C2;
}