<select>要素

<select>要素の定義

英語で「選択」を意味する”select”より。HTML文書では、選択式のメニュー（プルダウンメニュー/ドロップダウンメニュー）を提供するための要素です。
通常は、子要素として <option> 要素を定義して、メニュー内の選択肢を用意します。

子要素として使用できるもの

０個以上の <option> 要素、または <optgroup> 要素

親要素として使えるもの

記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

menu

DOMインターフェース

HTMLSelectElement

属性

グローバル属性が指定できます。

autocomplete

DOMString でユーザーエージェントによる自動補完のヒントを提供します。

autofocus

この属性を指定することで、ページ読み込み時に入力フォーカスを持つべきボタンであることを指定できます。文書中のフォーム関連要素のうち、1つだけにこの属性を指定できます。

disabled

この属性を指定することで、ユーザーによるメニューの操作を無効化します。

form

メニューに関連付けられる、<form> 要素の”id”属性を指定します。
この属性によって <form> 要素の子孫にするだけでなく、同一文書内にある任意の <form> 要素に<select>要素を関連付けることが可能になりました。

multiple

この属性を指定した場合、リストの複数の選択肢を選択することができるようになります。省略した場合は、単一選択となります。
なお、この属性を指定した場合、多くのブラウザではリストの見た目が「スクロール可能なリストボックス」となります。

name

フォーム情報とともに送信される、メニューの名前を指定します。

required

真偽値属性で、空ではない文字列の値の選択肢を選択しなければならないことを示します。

size

multiple属性によって、「スクロール可能なリストボックス」となっている場合に、一度に見えるべき行数を指定します。

スタイル付けに関するTIPS

MDNのサイトでも解説されていますが、高度なユーザーインターフェースを提供するための要素には、CSSによるスタイル付けが困難（ほぼ不可能）になっています。

一部の要素は、CSS でスタイルを設定できません。これらはすべての高度なユーザインターフェイスのウィジェットを含みます。たとえば範囲、色、日付のコントロールや、<select> 要素、<option> 要素、<optgroup> 要素や <datalist> 要素といったドロップダウンのウィジェットです。ファイルピッカーも、まったくスタイルを設定できないウィジェットとして知られています。新しい要素である <progress> と <meter> もこのカテゴリに入ります。

https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Styling_HTML_forms より
<select> を始めとするこれらの要素はブラウザによっての見た目の差や、同じブラウザであってもOSが違うと見た目が違う、ということもあります。
MDNのサイトでは、技術的な困難さが挙げられていますが、「プロダクトデザイン」という観点で考えても、「同じ用途のユーザーインターフェース部品」の見た目が、同じ端末内で大きく異る、というのはあまり好ましいことではありません。
技術的な難易度もあるでしょうが、技術的なハードルを超えてまで、デザインの自由度を高める必要性も低いという判断もあるのかもしれません。

サンプル

See the Pen wvwpKep by Masahiko Iwakiri (@m-iwakiri) on CodePen.