iphoneのchromeで input type="range"が表示されない

Question

###前提・実現したいこと
動画再生サイトを作成しており、独自のUIを組み込みたいと考えています。
開発中chromeのiphoneシミュレーターでinput type="range"が表示されないという現状が起きています。ホストは(Mac)

原因や解決する方法をご存知でしたら教えていただきたいです。
###発生している問題・エラーメッセージ

###該当のソースコード

<input type="range" class="controll-play-position" id="js-play-position" value="0" min="0" max="100">

###試したこと
inputタグのオプションを変えてみたり、CSSで display: block を試みましたが、うまくいきませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
chrome: Ver63.03
safari: Ver11.02

以上になります。よろしくお願いします。

Comments

[m.ts10806]

ｃｓｓの指定を全て外した状態だとどうなりますか？

[alberorana]

CSSを全て外してもchrome iphoneだけ表示されていない状態になりました。

Answer 1

自己解決です。
一度デフォルトのスタイルを消してから再度色をつけると上手く行きました。

input[type=range] {-webkit-appearance:none;}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;}}

Comments

[kittycut]

解決策ありがとうございます！まったく同じ問題でつまずいてました！
私の場合は1行目のみ追加したらうまく作動しました（2行目があると動きませんでした）。