投稿 formのselect要素をCSSでスタイル変更する は CodingMania に最初に表示されました。
]]><div class="mod_form"> <form> <div class="mod_form_select"> <select name="" id=""> <option selected="selected" 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> <!-- / .mod_form_select --></div> <div class="mod_form_select"> <select name="" id=""> <option selected="selected" value="" style="width: 800px;"> -------------------------</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=""> -------------------------</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>
.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; }
投稿 formのselect要素をCSSでスタイル変更する は CodingMania に最初に表示されました。
]]>