CSS:下拉選單美化

2013/01/01 6,764 0 網站技術 , CSS

下拉選單永遠白白的?很不好看嗎?
趕快試試看這個美化語法吧~!!
特效示範:

★原碼索取。
一、CSS原碼(放在head裡)
<style>
#mnya-select {
 font-size: 12px; /*文字大小*/
 color: #0033CC; /*文字顏色*/
 background-color: #00CCFF; /*選單背景顏色*/
}
</style>
二、html原碼(放在body裡)
<select name="select" id="mnya-select" >
<option>111</option>
<option>222</option>
<option>333</option>
 </select>

贊助廣告 ‧ Sponsor advertisements
Easing 函數速查表：網頁動畫執行速度函數查詢，可用 CSS、SCSS 或 jQuery
📆 2019-02-08
📁 網站技術, HTML, CSS, JavaScript, jQuery
PHP isset() & empty() 判斷變數是否為存在或空值函數
📆 2019-06-22
📁 網站技術, PHP
使用 Docker 安裝及運行 Node-RED 教學
📆 2021-12-08
📁 網站技術, Node.js, Node-RED
HTML <datalist> 輸入欄位可自動補字之下拉選單
📆 2021-10-08
📁 網站技術, HTML
XAMPP & Tomcat：建立 JSP 運行環境 & 讓 JSP 連接 SQL 資料庫
📆 2018-12-29
📁 軟體應用, 網站技術, 伺服器, 資料庫, JSP, SQL
CSS background-image 動態下橫線（底線）
📆 2020-08-26
📁 網站技術, CSS
Toastr：最佳的通知提示 jQuery 插件
📆 2019-07-01
📁 網站技術, JavaScript, jQuery
JavaScript：閏年判斷
📆 2021-03-03
📁 網站技術, JavaScript

留言區 / Comments

萌芽論壇

萌芽站長

您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！