inputやselectなどは特にCSSでスタイルを作らなくても自動的にスタイルが適用されます。
この自動的に適用されるスタイルを削除し、オリジナルのCSSを適用するには以下のようにすればOK。
formのスタイルをオリジナルに変更する
デフォルトのスタイルを削除するには以下のCSSを使います。
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
このままだと矢印も全てなくなってしまうので、以下のように追加しておきます。
<div class="category_select">
<select name="category_id">
<option label="全ての商品" value="">全てのカテゴリー</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">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;
}