10

主に iPad で表示する場合、フォーム ボタンのスタイルに一貫性がありません。何らかの理由で、 と の CSS スタイルbackground-colorがpaddingiPad に適用されません。グラデーションと丸い角を備えたデフォルトの外観のボタンが表示されますが、これは私が望んでいるものではありません。また、画像の使用は避けたいと思います。

CSS

.mailBtn {
  background: #fff;
  border:0;
  color: #000;
  font: 0.625em 'SansPro Light',sans-serif;
  margin: 0 0 0 -3px;
  padding: 11px 7px 10px;
  text-transform: uppercase;
}

HTML

<input type="submit" value="Send" class="mailBtn">

純粋な CSS を使用して、プラットフォーム間でスタイルの一貫性を維持するにはどうすればよいかについてのアイデアはありますか?

4

2 に答える 2

24

クラスで使用する必要があり-webkit-appearance:noneます。.mailBtnまた、畑で角が丸くなっている場合はinput、 を使用できます-webkit-border-radius:0。

私は通常、以下のようにフォーム要素の両方のプロパティをリセットします:

input, textarea, button {
    -webkit-appearance: none; /*Safari/Chrome*/
    -moz-appearance: none; /*Firefox*/
    -ms-appearance: none; /*IE*/
    -o-appearance: none; /*Opera*/
    appearance: none;

    -webkit-border-radius: 0; 
}

...ブラウザ間でスタイルの一貫性を保つためです。

于 2013-07-30T13:45:25.550 に答える
3

あなたが探しているかもしれません

-webkit-appearance: none;
  • --webkit-appearance に関する Safari CSS の注意事項
  • Mozilla Developer Network の --moz-appearance

参照リンク

于 2013-12-05T13:59:27.900 に答える