一个不常用的select，select和option宽度不一致。。。

最新推荐文章于 2023-03-23 17:19:16 发布

转载最新推荐文章于 2023-03-23 17:19:16 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3549294/blog/1926726

文章标签：

#javascript #python #ViewUI

本文介绍了一种HTML页面中自定义下拉框样式的实现方法，包括如何使用CSS进行布局调整及美化。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .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;
    }

</style>

<body>
    <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>

</body>

</html>