ホームページ > 記事 > ウェブフロントエンド > CSS カスタム ドロップダウン リスト スタイルのサンプル コード共有を簡単に紹介します。
dropダウンリストのデフォルトスタイル:dropダウンリストをカスタマイズする2つの方法があります。純粋な CSS スタイルのリスト。
原則: デフォルトのドロップダウン リスト スタイルをクリアし、スタイルをカスタマイズし、右揃えの小さな矢印の画像を添付します。
<!doctype html> <html> <head> <style type="text/css"> select{ width:200px; height:30px; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("images/select.png") no-repeat right center; font-size:16px; font-family:Microsoft YaHei; color:red; } </style> </head> <body> <form action="" method="post"> <select> <option value="请选择">请选择</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> </form> </body> </html>
問題: オプションの幅と高さの変更は無効です。
方法 2:
p+ul+jQuery を使用して、カスタム スタイルのドロップダウン リスト選択を実装します。
HTMLコード:
<p id="container"> <form action="" method="post"> <p> <ul> <li class="active">请选择</li> <li>北京</li> <li>上海</li> <li>广州</li> </ul> </p> </form> </p>
CSSコード:
#container{ background:grey; width:300px; height:200px; padding:20px; } form p{ width:236px; height:34px; } form p{ font-family:Microsoft YaHei; background:#FFFFFF; } form p:hover{ border:1px solid #E74F4D; } form ul{ margin:0; padding:0; } form ul li:first-child{ height:34px; line-height:34px; } form ul li{ width:236px; height:24px; line-height:24px; font-size:15px; color:#323333; opacity:0.7; background:#e3e3e5; text-indent:12px; display:none; } form ul li.active{ display:block; background:url("images/arrows_active_down.gif") no-repeat scroll right center; opacity:1; } form ul li:not(.active):hover{ background:#E74F4D; color:white; }jQueryコード:
$(document).ready(function(){ var p = $("form").find("p"); p.mouseover(function(e) { var event = e || window.event; var target = event.target || event.srcElement; var _this = $(this); if(target.nodeName.toLowerCase() == 'li') { _this.find('li').css('display', 'block'); _this.find('li').click(function(){ var li = $(this); _this.find('.active').text(li.text()); }); } _this.mouseout(function(e) { var event = e || window.event; var target = event.target || event.srcElement; if(target.nodeName.toLowerCase() == 'li') _this.find('li').not('.active').css('display','none'); }); }); });
以上がCSS カスタム ドロップダウン リスト スタイルのサンプル コード共有を簡単に紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。