質問: ### 前提・実現したいこと 動画再生サイトを作成しており、独自のUIを組み込みたいと考えています。 開発中chromeのiphoneシミュレーターでinput type="range"が表示されないという現状が起きています。ホストは(Mac) 原因や解決する方法をご存知でしたら教えていただきたいです。 ### 発生している問題・エラーメッセージ ![chrome iphone(表示されない)](https://teratail.storage.googleapis.com/uploads/contributed_images/93d8eb2a434abe3342e680bc8495d289.png) ![safari iphone](https://teratail.storage.googleapis.com/uploads/contributed_images/7613e8df5e12efa33bef838e24805e26.png) ![chrome pc](https://teratail.storage.googleapis.com/uploads/contributed_images/62db5a7bd587147d4d992134253304f0.png) ### 該当のソースコード ``` ``` ### 試したこと inputタグのオプションを変えてみたり、CSSで `display: block` を試みましたが、うまくいきませんでした。 ### 補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報 chrome: Ver63.03 safari: Ver11.02 以上になります。よろしくお願いします。
回答: 自己解決です。 一度デフォルトのスタイルを消してから再度色をつけると上手く行きました。 ``` input[type=range] {-webkit-appearance:none;} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;}} ```