CSS下拉選(select)是一個常用的表單元素,可以讓用戶在一定范圍內選擇一個選項。
在開發中,可能會遇到需要調整下拉框文字垂直居中的情況。下面是一段CSS代碼,可以實現這個效果:
select { padding: 0.5em; font-size: 16px; line-height: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096%20128'%20width='9px'%20height='auto'%3E%3Cpath%20d='M91,48.5L51,88.5a3.48,3.48,0,0,1-4.9,0L5,48.5'/%3E%3C/svg%3E") no-repeat right center / 12px auto; border: 1px solid #ccc; border-radius: 5px; outline: none; }
這段代碼的核心在于設置了下拉框的行高(line-height)為normal,然后通過在背景圖片上設置了一定的間距和對齊方式,實現了文字居中的效果。
總之,通過CSS樣式的調整,可以輕松實現下拉框文字的垂直居中。希望這篇文章對你有所幫助!