使用无线电自定义选择

Question

在某些项目中，我必须使用样式化的选择下拉列表，有很多库可以做到，但它们不能很好地工作，特别是有一些动态内容。

我想问cos和专业人士自定义电台选择：

HTML：

<div class="form_item f_select">
    <label class="current" for="select">Option #1</label>
    <input type="checkbox" id="select" autocomplete="false" />

    <label for="select" class="dropdown">
        <ul>
            <li class="option">
                <input type="radio" name="select" id="option_1" value="value_1" />
                <label for="option_1">Option #1</label>
            </li>
            <li class="option">
                <input type="radio" name="select" id="option_2" value="value_2" />
                <label for="option_2">Option #2</label>
            </li>
        </ul>
    </label>
</div>

SCSS：

.f_select {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    font-family: "Arial";
    font-size: 13px;

    * {
        box-sizing: border-box;
    }

    input {
        position: absolute;
        left: -99999px;
    }

    .current {
        border: 1px solid #a9a9a9;
        padding: 2px 5px 1px;
        border-radius: 2px;
        display: inline-block;

        &:after {
            content: "▼";
            display: inline-block;
            vertical-align: middle;
            font-size: 9px;
            margin-left: 7px;
            position: relative;
            top: -1px;
            background-color: transparent;
        }
        &:hover {
            border-color: #7e7e7e;
        }
    }
    input:checked + .dropdown {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    // IE8
    input.checked + .dropdown {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    .dropdown {
        position: fixed;
        left: -9999px;
    }
    ul {
        position: absolute;
        list-style: none;
        padding: 0;
        margin: 0;
        border: 1px solid #7f9db9;
        width: 100%;
        z-index: 101;
    }
    li {
        line-height: 1.2;

        label:hover,
        input:checked + label {
            color: #fff;
            background-color: #1e90ff;
        }

        // IE8
        label:hover,
        input.checked + label {
            color: #fff;
            background-color: #1e90ff;
        }

        label {
            display: block;
            padding: 0 5px 0;
        }
    }
}

并且有一些javascript女巫有助于作为原生选择工作。

完整的代码库位于：https://github.com/GomatoX/Select/

将来感谢。