Q&A
実現したいこと
HTML, CSSを用いて問い合わせボックスを作り、textareaの背景色を変更したいです。
前提
HTML, CSSを用いて問い合わせボックスを作りました。
背景色を変更したところ、テキストエリアを下に突き抜けて色が変更してしまいます。
テキストエリアのみ背景色を変更したいです。
該当のソースコード
HTML
1 <div class="footer-form"> 2 <p>お仕事の依頼やご相談等、お問い合わせはこちらからどうぞ。</p> 3 <form action="action.php" method="post" name="contact-form"> 4 <div class="footer-form-input"> 5 <i class="far fa-user"></i> 6 <input type="text" placeholder="氏名"> 7 </div> 8 <div class="footer-form-input"> 9 <i class="far fa-envelope"></i> 10 <input type="email" placeholder="メールアドレス"> 11 </div> 12 <div class="footer-form-textarea"> 13 <textarea placeholder="お問い合わせ内容"></textarea> 14 </div> 15 <input type="submit" value="送信する" class="buttun-primary"> 16 </form> 17 </div>
CSS
1.footer-form-input{ 2 position: relative; 3 background-color: #848080; 4 border-radius: 5px; 5} 6 7.footer-form-input input{ 8 padding: 10px 15px 10px 40px; 9} 10 11.footer-form-textarea{ 12 background-color: #848080; 13 border-radius: 5px; 14 padding-bottom: 0px; 15} 16 17.footer-form-textarea textarea{ 18 height: 150px; 19 padding: 10px 15px; 20 resize: none; 21}
結果は以下の写真の通りです。
氏名、メールアドレスについては背景色の変更が上手くいきましたが、
問い合わせ内容の欄に関してはテキストエリアを下に貫いてしまってる状況です。
試したこと
.footer-form-textareaの高さが154.~px
.footer-form-textarea textarea の高さが150pxでした。
そのため、どちらかをもう片方の高さに合わせようとしましたが、もう片方の高さが勝手に変わるため4pxの差を埋めることができませんでした。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。