JS CSS實作下拉列錶框美化效果（3款）_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS CSS實作下拉列錶框美化效果（3款）_javascript技巧

May 16, 2016 pm 03:44 PM

css js 美化

本文實例講述了JS CSS實現美化的下拉列錶框效果。分享給大家供大家參考。具體如下：

三款經過JS CSS美化的下拉列表，效果很不錯，總有一款適合你，先看看運行效果圖：

效果查看源碼下載

具體程式碼如下：

&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;style type="text/css"&gt;
&lt;!--
 @import url(css/select2css.css);
--&gt;
&lt;/style&gt;
&lt;script type="text/javascript" src="js/select2css.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form" name="form" method="post" action=""&gt;
 &lt;br /&gt;
&lt;div id="uboxstyle"&gt;
&lt;h3 style="color:#6D93AB;font-size:14px;"&gt;U-Box Style&lt;/h3&gt;
 &lt;select name="language" id="language"&gt;
 &lt;option value="English" selected="selected"&gt;Chinese&lt;/option&gt;
 &lt;option value="简体中文" &gt;简体中文&lt;/option&gt;
 &lt;option value="Deutsch" &gt;Deutsch&lt;/option&gt;
 &lt;option value="Espa&#63;ol" &gt;Espa&#63;ol&lt;/option&gt;
 &lt;option value="Fran&#63;ais" &gt;Fran&#63;ais&lt;/option&gt;
 &lt;option value="Italiano" &gt;Italiano&lt;/option&gt;
 &lt;option value="Polski" &gt;Polski&lt;/option&gt;
 &lt;option value="Português" &gt;Português&lt;/option&gt;
 &lt;option value="Svenska" &gt;Svenska&lt;/option&gt;
 &lt;option value="Türk&#63;e" &gt;Türk&#63;e&lt;/option&gt;
 &lt;option value="Руccкий" &gt;Руccкий&lt;/option&gt;
 &lt;/select&gt;
&lt;/div&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;h3 style="color:#6D93AB;font-size:14px;"&gt;Mac Style&lt;/h3&gt;
&lt;div id="macstyle"&gt;
 &lt;select name="language_mac" id="language_mac"&gt;
 &lt;option value="English" selected="selected"&gt;Chinese&lt;/option&gt;
 &lt;option value="简体中文" &gt;简体中文&lt;/option&gt;
 &lt;option value="Deutsch" &gt;Deutsch&lt;/option&gt;
 &lt;option value="Espa&#63;ol" &gt;Espa&#63;ol&lt;/option&gt;
 &lt;option value="Fran&#63;ais" &gt;Fran&#63;ais&lt;/option&gt;
 &lt;option value="Italiano" &gt;Italiano&lt;/option&gt;
 &lt;option value="Polski" &gt;Polski&lt;/option&gt;
 &lt;option value="Português" &gt;Português&lt;/option&gt;
 &lt;option value="Svenska" &gt;Svenska&lt;/option&gt;
 &lt;option value="Türk&#63;e" &gt;Türk&#63;e&lt;/option&gt;
 &lt;option value="Руccкий" &gt;Руccкий&lt;/option&gt;
 &lt;/select&gt;
&lt;/div&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;h3 style="color:#6D93AB;font-size:14px;"&gt;TM2008 Style&lt;/h3&gt;
&lt;div id="tm2008style"&gt;
 &lt;select name="language_tm2008" id="language_tm2008"&gt;
 &lt;option value="English"&gt;Chinese&lt;/option&gt;
 &lt;option value="简体中文" &gt;简体中文&lt;/option&gt;
 &lt;option value="Deutsch" &gt;Deutsch&lt;/option&gt;
 &lt;option value="Espa&#63;ol" &gt;Espa&#63;ol&lt;/option&gt;
 &lt;option value="Fran&#63;ais" &gt;Fran&#63;ais&lt;/option&gt;
 &lt;option value="Italiano" &gt;Italiano&lt;/option&gt;
 &lt;option value="Polski" &gt;Polski&lt;/option&gt;
 &lt;option value="Português" &gt;Português&lt;/option&gt;
 &lt;option value="Svenska" &gt;Svenska&lt;/option&gt;
 &lt;option value="Türk&#63;e" &gt;Türk&#63;e&lt;/option&gt;
 &lt;option value="Руccкий" &gt;Руccкий&lt;/option&gt;
 &lt;/select&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn