inputのcheckboxの内側に変な影ができるので消したいです！

Question

前提・実現したいこと

◎HTML

<input type="checkbox"> チェックボックス

◎CSS

input[type="checkbox"] {
    border-radius: 0;
    outline: none;
    border-width: 1px;
    border-color: black;
}

iPhoneのSafariのブラウザでinputタグを見ると内側に変な影が出るので、影を消したいです。

教えて頂けると幸いです！

試したこと

-webkit-appearance: none;

を指定しましたが、inputのチェックボックス自体が表示されなくなりました。

そして高さと幅を指定しましたが、上手くinputタグが表示されませんでした。

補足情報

MacBook Pro

Answer 1

リセットCSS各種試してみては。
【CSS】form用のリセット設定（ノーマライズCSS、リセットCSSとの比較）

Comments

[yujiyuji]

ありがとうございます！試してみます！