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技巧,我們可以為我們的下拉框添加居中顯示的文字,讓它在網頁中更加美觀。
上一篇css下拉怎么調整
下一篇css下拉框在火狐變樣