色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css下拉框添加文字居中

方一強2年前14瀏覽0評論

CSS下拉框是網頁制作中一個常見的元素。但是,當我們在下拉框中選擇一項時,會發現選中的文字會靠左顯示,不太美觀。為了讓下拉框中的文字居中顯示,我們可以使用一些CSS技巧。

首先,在HTML中添加一個select元素:

<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
</select>

然后,在CSS中對select元素進行樣式設置:

select {
padding: 8px 38px 8px 10px;
font-size: 16px;
line-height: 1.3;
color: #333;
border: none;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
option {
padding: 10px;
text-align: center; /* 這里是關鍵,居中顯示 */
}

在這段代碼中,我們先對select元素進行了一些基礎的樣式設置,如內邊距、字體大小、顏色等。然后,我們使用了border-radius屬性,使下拉框外觀更加美觀。

接著,我們使用了-webkit-appearance、-moz-appearance和appearance來去掉select默認的樣式,使其成為我們自己設置的樣式。然后,我們用select::-ms-expand來隱藏IE中的下拉箭頭。

最后,我們使用了option元素的text-align屬性,將選項中的文字居中顯示。

通過這些CSS技巧,我們可以為我們的下拉框添加居中顯示的文字,讓它在網頁中更加美觀。