CodingMania

CodingMania

2015/2/17

formのselect要素をCSSでスタイル変更する

[スマホ]で使える！

スマートフォン表示のみなら、CSSだけでformのselectをカンタンにスタイル変更できます
↓参考にしました。ここに詳しく説明があります
CSSだけで<select>をカスタマイズする
PCでは、はみ出てしまいます。。。デモページはスマホでご覧ください。

デモページへopen_in_new

HTMl

<div class="mod_form">
<form>
<div class="mod_form_select">
<select name="" id="">
<option selected="selected" value="">&#12288;-------------------------</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>
<!-- / .mod_form_select --></div>
<div class="mod_form_select">
<select name="" id="">
<option selected="selected" value="" style="width: 800px;">&#12288;-------------------------</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>
<!-- / .mod_form_select --></div>
<div class="mod_form_select">
<select name="" id="">
<option selected="selected" value="">&#12288;-------------------------</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>
<!-- / .mod_form_select --></div>
 </form>
<!-- /mod_form --></div>

CSS

.mod_form{
 margin:0 auto;
 width:100%;
 font-size:16px;
}
.mod_form_select {
 overflow: hidden;
 width:100%;
 box-sizing:border-box;
 border-radius: 3px;
 padding:3px 0 3px 10px;
 margin: 0 0 10px 0;
 border: 1px solid #dfdfdf;
 vertical-align: middle;
 background: #efefef url(img/img-arrow-down.png) no-repeat 95% 50%;
}
.mod_form_select select {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 border-radius: 0;
 border: 0;
 margin: 0;
 padding:0;
 background: none transparent;
 vertical-align: middle;
 font-size: inherit;
 color: inherit;
 box-sizing: content-box;
 width: 130%;
 height:35px;
}

© CodingMania.net