如何增加HTML5下拉框的用戶體驗(yàn)？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了秀洲免費(fèi)建站歡迎大家使用！

本文給大家講h6、select下拉框右邊加圖標(biāo)，深度美化頁(yè)面增進(jìn)用戶體驗(yàn)效果

那么我們先來(lái)看一下效果吧！

再看看h6的結(jié)構(gòu)：

<div id="login-div">
                <div class="select-wrapper">
                    <select id="selector1">
                        <option value="" disabled selected>請(qǐng)選擇系統(tǒng)：</option>
                        <option value="1">微信-蘋(píng)果</option>
                        <option value="2">微信-安卓</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <div class="select-wrapper">
                    <select id="selector2">
                        <option value="" disabled selected>請(qǐng)選擇渠道：</option>
                        <option value="1">渠道1</option>
                        <option value="2">渠道2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <div class="select-wrapper">
                    <select id="selector3">
                        <option value="" disabled selected>請(qǐng)選擇大區(qū)：</option>
                        <option value="1">大區(qū)1</option>
                        <option value="2">大區(qū)2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <div class="select-wrapper">
                    <select id="selector4">
                        <option value="" disabled selected>請(qǐng)選擇角色：</option>
                        <option value="1">角色1</option>
                        <option value="2">角色2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <p id="notice">單個(gè)帳號(hào)只能領(lǐng)取一次獎(jiǎng)勵(lì)</p>
                <img src="ossweb-img/comfire1.png" alt="" id="comfire1"/>
            </div>

樣式部分是用了sass進(jìn)行控制的，如果不會(huì)sass也可以換成css。沒(méi)有什么特別的運(yùn)算需要轉(zhuǎn)化，所以換成css也簡(jiǎn)單

@function REM($n){
        @return $n/$REM*1rem;
    }
 #login-div{
        background: url(../ossweb-img/kuang1.png)0 0 no-repeat;
        background-size: 100% 100%;
        width: REM(564);
        height: REM(531);
        margin-left: REM(38);
        .select-wrapper{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: REM(50);
            margin: REM(10) auto;
            padding-top: REM(15);
            &>select{
                width: REM(458);
                height: REM(63);
                padding-left: REM(20);
                border: 1px solid #23282d;
                background: #23282d;
                -webkit-appearance: none;
                color: #92989f;
                font-size: REM(24);
                margin-top: REM(75);
                border-radius: 0;
                z-index:10;
            }
            .arrow{
                position: absolute;
                width: REM(41);
                height: REM(30);
                top: REM(65);
                right: REM(80);
                pointer-events: none;
                z-index:11;
            }
        }
        #notice{
                font-size: REM(20);
                color: #92989f;
                text-align: center;
                margin-top: REM(75);
        }
        #comfire1{
                width: REM(220);
                height: REM(78);
                margin-top: REM(20);
                margin-left: REM(174);
        }
    }

解析：主要是.arrow這個(gè)元素進(jìn)行右邊那個(gè)圖標(biāo)的位置控制。利用position: absolute;這個(gè)屬性控制好位置，就基本沒(méi)有問(wèn)題了。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

分享名稱(chēng)：如何增加HTML5下拉框的用戶體驗(yàn)
文章路徑：http://jinyejixie.com/article12/pgcpgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、企業(yè)建站、網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)