スマホのブラウザ（Chrome, Safari）にのみ一部のCSSが反映されない

Question

PCでは意図した通りにCSSが効くのですが、スマートフォンで表示した場合に一部のCSSのみが効いてくれません。
ブラウザはPC、スマホ共にChrome, Safariで確認しています。
なお、PCで要素の検証→スマホの画面に切り替えた場合はきちんと効きます。

効かない部分を具体的に申し上げると、ユーザー登録画面の登録ボタンの背景色です。
その部分のHTML及びCSS

<div class="actions">
  <%= f.submit "登録", style: "background-color: #80CACA;"  %>
</div>

form input[type="submit"] {
  background-color: #80CACA;
  border-radius: 20px;
  color: #fff;
  border: 0;
  font-size: 18px
}

以下、PCのChromeで確認した正規の表示です。
↓PC

↓スマホ

以下、スマホのChromeで確認したときでcssが効いていないものです。

ご覧の通り、背景色が薄くなっており、上記HTML内で指定しても効きません。
どなたか、よろしくお願いいたします。。。

Answer 1

cssに!importantを付けても効きませんか？

form input[type="submit"] {
  background-color: #80CACA !important; /*modified*/
  background: yellow;
  border-radius: 20px;
  color: #fff;
  border: 0;
  font-size: 18px
}

追記（20180817）
ぐぐりました：

• iPhoneなどでinput要素のボタンにCSSが効かない時の対処方法。
• 【フォーム】iOSのボタンが角丸グラデーションになるのをリセット

input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}

検索ワード「スマホ input css」

Comments

[kk_stats]

ご回答ありがとうございます。
```!important```をつけ、キャッシュも削除した上で確認いたしましたが状況変わらずでございました。。。

[kk_stats]

-webkit-appearance:none;で無事cssが効きました！
プラットフォーム独自の装飾仕様だったのですね、、

検索までしてくださり誠にありがとうございました！とても助かりました！