inputやselectで自動的に適用されるスタイルを削除する方法

このエントリーをはてなブックマークに追加
Pocket

inputやselectなどは特にCSSでスタイルを作らなくても自動的にスタイルが適用されます。
select
この自動的に適用されるスタイルを削除し、オリジナルのCSSを適用するには以下のようにすればOK。

formのスタイルをオリジナルに変更する

デフォルトのスタイルを削除するには以下のCSSを使います。

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

select2
このままだと矢印も全てなくなってしまうので、以下のように追加しておきます。

<div class="category_select">
  <select name="category_id">
    <option label="全ての商品" value="">全てのカテゴリー</option>
    <option value="1">１</option>
    <option value="2">２</option>
    <option value="3">３</option>
    <option value="4">４</option>
    <option value="5">５</option>
  </select>
  <span class="carat"></span>
</div>

.category_select{
position: relative;
cursor: pointer;
padding-right: 0;
}
select{
width: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.carat {
cursor: pointer;
position: absolute;
right: 12px;
top: 50%;
margin-top: -2px;
border: 4px solid transparent;
border-top: 6px solid #777;
}

select3