鬼谷網頁設計

CSS教學-自製下拉式列表外觀

回列表icon

回列表

網頁設計-下拉式列表

內建的下拉式列表風格只有一種

所以分享這篇,讓大家能自己製作一個美觀的按鈕
因為下拉式選單可以直接點方塊便會有選項出現
所以我把內建的按鈕給隱藏
再把自己製作的圖做成背景,讓他置右
這樣便會出現自己所製作的按鈕
以下是範例

html:
<div class="text">
	<select class="text-select">
		<option>請選擇</option>
		<option>text1</option>
		<option>text2</option>
		<option>text3</option>
	</select>
</div>
css:
.text{
width:100%;
}
.text select{
width:500px; 
height:60px;
line-height: 55px;
font-size: 1.5rem;
border: 1px solid #000;
color: #5f5f5f;
}
上一篇 上一篇 下一篇 下一篇