HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))
發(fā)布時(shí)間：2017-10-16 11:25:07 作者：佚名 
我要評論
我要評論這篇文章主要介紹了HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼，深度美化頁面增進(jìn)用戶體驗(yàn)效果,需要的朋友可以參考下
本文給大家講h5、select下拉框右邊加圖標(biāo)，深度美化頁面增進(jìn)用戶體驗(yàn)效果
1.那么我們先來看一下效果吧！
2.再看看h5的結(jié)構(gòu)：
<div id="login-div">
<div class="select-wrapper">
<select id="selector1">
<option value="" disabled selected>請選擇系統(tǒng)：</option>
<option value="1">微信-蘋果</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>請選擇渠道：</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ū)：</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>請選擇角色：</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è)帳號只能領(lǐng)取一次獎(jiǎng)勵(lì)</p>
<img src="ossweb-img/comfire1.png" alt="" id="comfire1"/>
</div>
3.樣式部分是用了sass進(jìn)行控制的，如果不會sass也可以換成css。沒有什么特別的運(yùn)算需要轉(zhuǎn)化，所以換成css也簡單
@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);
}
}
4.解析：主要是.arrow這個(gè)元素進(jìn)行右邊那個(gè)圖標(biāo)的位置控制。利用position: absolute;這個(gè)屬性控制好位置，就基本沒有問題了。
總結(jié)
以上所述是小編給大家介紹的HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- Microdata作為HTML5新增的一個(gè)特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局，感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘實(shí)戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘的web展示,通過Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動(dòng)態(tài)轉(zhuǎn)動(dòng),每個(gè)時(shí)鐘上都會標(biāo)注出對應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性（data-*）提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框＜select＞標(biāo)簽的屬性和樣式詳解
在HTML5中，下拉框（<select>標(biāo)簽）作為表單的重要組成部分，為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式，并重點(diǎn)介2025-02-27
本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器，感興趣的朋友一起看2025-02-17
本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖2025-02-17- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)（link、visited、hover、active）的CSS樣2025-02-17
HTML5使用details標(biāo)簽：展開/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用，這個(gè)不用js即可實(shí)現(xiàn)展開/收縮信息，很方便用來讓用戶先才答案，然后下面點(diǎn)擊再給出答案的效果，這里就為大家簡單介紹一下，2024-11-03
