Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29

Warning: Cannot modify header information - headers already sent by (output started at /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php:29) in /home/yotigory/codingmania.net/public_html/wp-includes/feed-rss2.php on line 8
select アーカイブ - CodingMania https://codingmania.net/tag/select コーディングマニアは、コーダーやWEBデザイナーが、効率よくコーディング作業が出来ることを目指したサイトです。 Thu, 24 Sep 2015 04:15:41 +0000 ja hourly 1 https://wordpress.org/?v=5.8.10 formのselect要素をCSSでスタイル変更する https://codingmania.net/form/1001.html https://codingmania.net/form/1001.html#respond Tue, 17 Feb 2015 10:44:09 +0000 http://codingmania.net/?p=1001 HTMl CSS

投稿 formのselect要素をCSSでスタイル変更するCodingMania に最初に表示されました。

]]>
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;
}

投稿 formのselect要素をCSSでスタイル変更するCodingMania に最初に表示されました。

]]>
https://codingmania.net/form/1001.html/feed 0