submitのCSSファイルがスマホで上手く反映されない

Question

Ruby on Railsを使ってherokuアプリを作っています。
正方形で白いボタンを作ろうと思ってSCSSファイルに次のように記述しました。

input[type=submit] {
  font-size:60px;
  color:#3F8CFF;
  margin:3px;
  width:65px;
  height:65px;
  background:#ffffff;
  border:none;
  border-radius:5px;
  position:relative;
  top:400px;
}

PCではうまくいっていたのですが、スマホで確認するとなぜか長方形でなおかつグラデーションが付いていました。調べたところ -webkit-appearance: none;を書けばいいとのことだったので、追加して次のように記述しました。

input[type=submit] {
  -webkit-appearance: none;
  font-size:60px;
  color:#3F8CFF;
  margin:3px;
  width:65px;
  height:65px;
  background:#ffffff;
  border:none;
  border-radius:5px;
  position:relative;
  top:400px;
}

これでグラデーションは消えたのですが、なぜか正方形にならず困っています。どうすれば正方形になるのでしょうか。初心者ゆえに初歩的な質問をしているかもしれませんが、どうか回答よろしくお願いします。

Answer 1

フォントのサイズを小さくするとできました。