コンタクトフォーム7で予約フォームを作っています。
下の画像の通り、プルダウンメニューの枠内の数字が少し下のボーダーにかかっているのですが、この文字をボーダーに触れないように少し離したいです。(できれば枠内の縦ど真ん中に配置したいです。)
CSSのどこかを調整すべきだと思いますが、どこをどうすればいいでしょうか?
コンタクトフォーム7プラグインなので、実際のご確認が難しいと思いますが、どうぞよろしくお願いいたします。
HTML
1<tr class="flex"> 2<th class="contact-title-wrapper flex flex-sb"> 3<span class="contact-title">ご予約日時</span> 4<span class="must">必須</span> 5</th> 6<td class="contact-content date-time"> 7<span class="nen">[select* year1 "2020" "2021"]年</span> 8<span class="wpcf7-custom-item-error year1"></span> 9<span class="gatsu">[select* month1 include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月</span> 10<span class="wpcf7-custom-item-error month1"></span> 11<span class="nichi">[select* day1 include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日</span> 12<span class="wpcf7-custom-item-error day1"></span> 13<br class="date-time-br"> 14<span class="kaishiji">[select* start-time1 include_blank "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24"]時〜</span> 15<span class="wpcf7-custom-item-error start-time1"></span> 16<span class="syuryouji">[select* end-time1 include_blank "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24"]時まで</span> 17<span class="wpcf7-custom-item-error end-time1"></span> 18</td> 19</tr>
SCSS
1.flex { 2 display: flex; 3} 4 5.flex-sb { 6 display: flex; 7 justify-content: space-between; 8} 9 10.contact-title-wrapper { 11 width: 400px; 12 background: gray; 13 margin: 0 10px 10px 0; 14 padding: 20px 15px; 15 line-height: 1; 16 display: flex; 17 align-items: center; 18} 19 20.contact-title { 21 color: #fff; 22 display: flex; 23 align-items: center; 24 line-height: 1; 25 font-size: 2.1rem; 26 font-weight: bold; 27} 28 29.contact-content { 30 display: block; 31 width: calc(100% - 400px); 32 margin: 0 0 10px 0; 33 padding: 20px 35px; 34 background: lightgray; 35 font-size: 2.1rem; 36} 37 38.must { 39 font-size: 1.3rem; 40 padding: 5px; 41 background: red; 42 color: #fff; 43 display: flex; 44 align-items: center; 45 line-height: 1; 46} 47 48.date-time { 49 line-height: 1; 50 51 br { 52 display: none; 53 } 54 55 .nen, 56 .gatsu, 57 .nichi, 58 .kaishiji, 59 .syuryouji { 60 margin: 0 5px 0 0; 61 } 62 63 .year1, 64 .month1, 65 .day1, 66 .start-time1, 67 .end-time1 { 68 margin: 0 5px 0 0; 69 } 70} 71 72 73
あなたの回答
tips
プレビュー