【CSS】webit-appearanceでWebKitベースのデフォルト解除

-webkit-appearance: none

-webkit-appearance: noneは、CSSのプロパティで、WebKitベースのブラウザ（Google ChromeやSafari）において、デフォルトのスタイルを削除して、要素をカスタムスタイルするために使用する。

実装理由

◎カスタマイズ
デフォルトの見た目を取り除き、自分のデザインを適用するため。

◎一貫性
WebKitベースのブラウザでの表示を他のブラウザと一貫させるため。

使用例

テキスト入力フィールド

.form input[type="text"],
.form input[type="email"],
.form textarea {
    width: 100%;
    margin-bottom: 17px;
    padding: 12px 20px 14px;
    border: solid 1px #CDD6DD;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
}

ドロップダウンリスト

select {
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #ccc;
}

注意

-webkit-appearanceはベンダープレフィックス付きプロパティであり、他のブラウザ（例：FirefoxやInternet Explorer）には異なるプレフィックスが必要な場合がある（例：-moz-appearance）。