CSS装飾なしの場合のブラウザデフォルトの見た目
Win10 Chrome113
![](https://deep-space.blue/main/wp-content/uploads/2023/05/win10-chrome113-1024x635.jpg)
number
マウスオーバーすると上下の三角形アイコンが表示され、それをクリックすると数値が増減する。
この仕様はEdgeでも同様(Win11・macOS VenturaのChromeも同じ)
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image.png)
datalist
マウスオーバーすると下向きの三角形が表示されて(この部分はEdgeも同じ)、クリックするとリストのデータが表示される(Win11・macOS VenturaのChromeも同じ)
通常の時とシークレットウィンドウの時とでリストの色が違う。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-1-1024x312.png)
select
optionはselectの下にぴったりくっついて表示される。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-3.png)
Win10 Edge113
フォームのベース色やdate系のアイコンがChromeと違う
![](https://deep-space.blue/main/wp-content/uploads/2023/05/win10-edge113-1024x642.jpg)
number
Win10 Chromeとほぼ同じ動作。マウスオーバーすると上下の三角形が表示される。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-10.png)
datalist
マウスオーバーすると下向きの三角形が表示されて(この部分はEdgeも同じ)、クリックするとリストのデータが表示される。
通常の時とシークレットウィンドウの時とでリストの色が違う。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-6-1024x241.png)
select
optionはselectの下の少し離れたところに表示される。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-7.png)
Win11 Chrome113
Win10 Chromeとよく似ている
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-9-1024x635.png)
number
Win10 Chromeと同じ
datalist
Win10 Chromeと同じ
select
optionはselectの下にぴったりくっついて表示されるのはWin10と同じだが、リスト全体に角丸があたる。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-13-240x300.png)
Win11 Edge113
Win10 Edgeとよく似ている。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-15-1024x646.png)
number
Win10 Edgeと同じ。
datalist
Win10 Edgeとよく似ているが、リスト部分の表示がWin10と少し違う。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-16-300x236.png)
select
optionはselectの下の少し離れたところに表示されるのはWin10と同じだが、リスト全体に角丸があたる。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-19-236x300.png)
macOS 13 Ventura Chrome113
Win10, Win11 Chromeとよく似ている。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-22-1024x712.png)
number
Win10 Chromeと同じ
datalist
Win10 Chromeと同じ
select
optionはselectの上にかぶさるような要素として出現する
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-24.png)
macOS 13 Ventura Safari16
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-26-1024x686.png)
number
初めから上下の三角形が表示されている以外は他ブラウザと一緒。
datalist
Win11のselectのようにinputの下にリストが表示される。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-25.png)
select
optionはselectの上にかぶさるような要素として出現するのは、macOSのChromeとほぼ同じ
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-27.png)
Android 13 Chrome113
全体的には他OSのChromeと同じ
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-28-52x300.png)
number
上下の三角形が表示されるようなUIは無し。数値をキーボードで入力。
datalist
選択肢のリストはキーボードの上に横並びで表示。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-29.png)
select
optionはモーダルウィンドウのような感じで表示
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-30.png)
iOS16 Safari
Chromeの見た目・動作もこちらと同様。
date系やselect系のフォームスタイルが他OS Chromeとはかなり異なる
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-32-49x300.png)
number
上下の三角形が表示されるようなUIは無し。数値をキーボードで入力。
datalist
一度タップするとリスト表示、もう一度タップするとキーボード入力になる。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-33-900x1024.png)
select
optionはselectの下にぴったりくっついたリストとして表示される。
![](https://deep-space.blue/main/wp-content/uploads/2023/05/image-37.png)
コメント