カスタマイズおよび美化されたドロップダウン選択 box_html/css_WEB-ITnose

これは、HTML5 SVG と CSS3 を使用して作成された、優れた選択ドロップダウン メニューの美化効果です。 JavaScript を使用すると、フォーム内の要素をより美しいスタイルに変更したり、選択ドロップダウン メニューなどのより複雑なフォーム要素を変更したりできます。ユーザーがより良いユーザーエクスペリエンスを得ることができるように、フォームを美しくするソリューションを多数用意できます。

デモの表示 ソース コードのダウンロード

HTML 構造

次に、選択ドロップダウン メニューの HTML 構造を見てみましょう。

<select class="cs-select cs-skin-rotate">  <option value="" disabled selected>Choose your option</option>  <option value="1">Option 1</option>  <option value="2">Option 2</option>  <option value="3">Option 3</option></select>

これを次の構造に変換する必要があります:

<div class="cs-select cs-skin-rotate">  <span class="cs-placeholder">Choose your option</span>  <div class="cs-options">    <ul>      <li data-option data-value="1" class="cs-selected"><span>Option 1</span></li>      <li data-option data-value="2"><span>Option 2</span></li>      <li data-option data-value="3"><span>Option 3</span></li>    </ul>  </div>  <select class="cs-select cs-skin-rotate">    <option value="" disabled selected>Choose your option</option>    <option value="1">Option 1</option>    <option value="2">Option 2</option>    <option value="3">Option 3</option>  </select></div>

要素の値を選択するために必要なため、実際の select 要素を保持します。

プレースホルダーは無効に設定され、null 値に設定されます。これはオプションであり、省略可能です。このとき、最初のリスト オプションが表示されるか、または「selected」属性を持つリスト項目が表示されます。

select 要素にデータリンクまたはデータクラス属性を設定できます。 data-link 属性は、リスト項目をクリックすると動的リンクを開きます。 data-class 属性は、リスト項目のクラスをカスタマイズできます。

CSS

すべてのデモの基本スタイルは、cs-select.css ファイルで定義されています。ここでは、選択ドロップダウン メニューの基本スタイルを定義して、フラットに見えるようにします。次の CSS スタイルは、境界線効果の選択ドロップダウン メニュー スタイル効果です:

@font-face {  font-family: 'icomoon';  src:url('../fonts/icomoon/icomoon.eot?-rdnm34');  src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),    url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),    url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),    url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');  font-weight: normal;  font-style: normal;} div.cs-skin-border {  background: transparent;  font-size: 2em;  font-weight: 700;  max-width: 600px;} @media screen and (max-width: 30em) {  .cs-skin-border { font-size: 1em; }} .cs-skin-border > span {  border: 5px solid #000;  border-color: inherit;  transition: background 0.2s, border-color 0.2s;} .cs-skin-border > span::after,.cs-skin-border .cs-selected span::after {  font-family: 'icomoon';  content: '\e000';} .cs-skin-border ul span::after {  content: '';  opacity: 0;} .cs-skin-border .cs-selected span::after {  content: '\e00e';  color: #ddd9c9;  font-size: 1.5em;  opacity: 1;  transition: opacity 0.2s;} .cs-skin-border.cs-active > span {  background: #fff;  border-color: #fff;  color: #2980b9;} .cs-skin-border .cs-options {  color: #2980b9;  font-size: 0.75em;  opacity: 0;  transition: opacity 0.2s, visibility 0s 0.2s;} .cs-skin-border.cs-active .cs-options {  opacity: 1;  transition: opacity 0.2s;} .cs-skin-border ul span {  padding: 1em 2em;  backface-visibility: hidden;} .cs-skin-border .cs-options li span:hover,.cs-skin-border li.cs-focus span {  background: #f5f3ec;}

デモでは、次のフォント アイコンを使用しました: Ionicons と Font Awesome。

デモの 1 つで使用されている SVG フラグは、Sean Herron の Flag Webicons Set です。

ファイル内の CSS ファイルをダウンロードすると、他のデモの効果を確認できます。