css下拉框select自定义样式

注意：外层标签的宽度要大于下拉框的宽度

标签：

<span class="styled-select">

                <select class="sel_op">
                   <option value="1">套餐A</option>
                    <option value="2">套餐B</option>
                    <option value="3">套餐B</option>
                </select>

                </span>

样式：

.mask_box .styled-select  {

1. width: 76%;
2. height: 40px;
3. overflow: hidden;
4. background: url(../images/select.png) right no-repeat;//背景图片
5. background-position-x: 97%;
6. float: left;
7. padding: 8px 0;

}

.sel_op  {

1. width: 100%;
2. height: 40px;
3. border: 1px solid #85b8d8;
4. border-radius: 5px;
5. color: #333333;
6. font-size: 16px;
7. background: transparent;
8. -webkit-appearance: none;

}