请使用firefox,chrome等最新浏览器浏览本站。

组件美化- select option

css3 阿豹 732次浏览 0个评论 扫描二维码

index代码:

<span class="f-fr u-select">
    <p>中文</p>
    <select class="itemSelect">
        <option value="中文">中文</option>
        <option value="english">english</option>
    </select>
</span>

js代码:

$(".u-select select").on("change", function(){
    $(this).prev().text($(this).val());
});

sass代码:

.u-select {
    width: 70px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    position: relative;
    background-color: #b2ccff;
    border-radius: 2px;
    color: #061940;
    font-size: 12px;
    text-align: center;
    &>p {
        text-align: center;
        height: 100%;
    }
    select {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        opacity: 0;
    }
}

转载请注明组件美化- select option
喜欢 (8)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到