HTML <select></select>について

Question

前提・実現したいこと

画像の上側は単にselectコードを使っただけのものなのですが、下側のような形にしたいです。
作り方を教えて下さい。

Comments

[m.ts10806]

自身で調べたことや試したことを記載してください(でないと丸投げです)

Answer 1

CSSフレームワーク使えばブラウザ間の違いなどもある程度吸収した作りになるので
やりたいことに近くなるとは思いますが、既に出ているように自力実装はかなり困難です。

• Materializeの例 ULタグでラップ。JavaScriptで制御
• BootStrapの例 selectタグ。ブラウザ間で違いはある。

materialのほうは違いが少ない

他にも色々あるので見てみてください。

• 厳選！軽量で使いやすいCSSフレームワーク10選【2019年最新】

まぁ「こういう見た目にしたい」のはいいとして「対象のブラウザ」は出しておいたほうが良いかと思います。「なんでも」ならCSSフレームワークを使うしかないし「これ」って決まってるのならそのブラウザにだけ頑張って当てていく形になりますし。

Answer 2

画像の上側は単にselectコードを使っただけのものなのですが、下側のような形にしたいです。

作り方を教えて下さい。

<select>のスタイルはブラウザ組み込みなので、細かな制御は効きません。

2枚の画像で別なブラウザ、ということでしたら、それはブラウザごとの違い以上の何者でもありません。

（もちろん、<div>などを組み合わせて自分で描画すれば特定の形にできますが、単に<select>を使うより圧倒的に手間がかかります）

Answer 3

まぁリセットCSS使えってことになりますがselectやinputはすべてのブラウザで同じ表示にするのは大変難しいです。
ある程度同じ=不自然ではない
表示にすることは可能です。
どうしても同じにしたいって言うならcheckboxやlabelをつかってできなくもないです。