模仿选择

Question

我试图模仿带有跨度的标签。这是代码：

HTML

<div class="field select-field">
    <select class="form-control">
        <option value="">Select Type of paper</option>
        <option value="1">Essay (any type)</option>
    </select>
    <span class="select" id="select-1">Select Type of paper</span>
</div>

CSS

.select-field {
        position: relative;
    }

    select::-ms-expand {
        display: none;
    }

    .select-field select {
        cursor: pointer;
        overflow: hidden;
        opacity: 0;
        z-index: 10;
    }

    span.select {
        position: absolute;
        width: 100%;
        bottom: 0;
        float: left;
        top: 0;
        left: 0;
        line-height: 38px;
        text-indent: 10px;
        cursor: default;
        z-index: 1;
        font-size: 14px;
        overflow: hidden;
        color: #b1a9bb;
        background: url(images/arrow.png) no-repeat right #e6e7e9;
        border-radius: 6px;
    }

选择标记现在是不可见的，我需要将其激活（您可以通过点击获取下拉，并且JS将更改内容的内容）。

Answer 1

1. 将班级选择的位置更改为亲戚，
2. 选择标记也必须具有相对位置。
3. 将选择标记的高度设置为例如38px。
4. 添加选择类的减号顶部位置，-38px。

应该工作。