css样式美化下拉框 select 样式

最新推荐文章于 2024-08-24 09:00:00 发布

w36680130

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量1.4k

点赞数

文章标签： css select 样式下拉框

原文链接：https://www.cnblogs.com/dazhangli/p/6428039.html

版权

本文转载自： https://www.cnblogs.com/dazhangli/p/6428039.html 作者：dazhangli 转载请注明该声明。

                                     <span class="setleft wid80"><span class="fyhbx">*</span>入库类型 :</span>
                                            <div class=" posirelative select-out-div">
                                                <select class="m-wrap  "  style="width: 180px; padding: 2px 0;">
                                                    <option value="0">采购</option>
                                                    <option value="1">返货</option>
                                                    <option value="2">移库入货</option>
                                                </select>
                                                <span class="select-hide-span" >
                                                    <b class="select-show-b"  ></b></span>
                                            </div>

.posirelative {
    position: relative;
}
.select-out-div {
    width: 160px;
    overflow: hidden;
}
select.m-wrap {

    background-color: #ffffff;
    background-image: none !important;
    filter: none !important;
    border: 1px solid #e5e5e5;
    outline: none;
    height: 25px !important;
    line-height: 25px;
}
.select-hide-span {
    height: 25px;
    position: absolute;
    top: 0;
    border-right: 1px solid #e5e5e5;
    right: 0;
    width: 20px!important;
    z-index: 999;
}
.select-show-b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    margin-left: -4px;
    margin-top: 10px;
    position: absolute;
}