Textarea to fill a parent container exactly, with padding

后端未结

关注

 4  1292

闹比i 2020-12-07 17:33

I want a </code> to completely fill an absolutely-sized parent container, with padding in the textarea. I have this working for Chrome using the follow <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>4条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111" class="jieda-daan"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href=""> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000009.jpg" alt=" -上瘾入骨i "> </a> <div class="fly-detail-user"> <a href="" class="fly-link"> <cite> -上瘾入骨i</cite> </a> <span>(楼主)</span> </div> <div class="detail-hits"> <span>2020-12-07 18:15</span> </div> </div> <div class="detail-body jieda-body photos"> <p> <p>This is a case where I highly recommend changing the markup (it wont even hurt the semantics):</p> <p>HTML</p> <pre><code><div id="wrap"> <label class="textarea-label"> <textarea>

CSS

.textarea-label
{
  display: block;
  /* border, padding, and other styles go here,
  don't set the height, and don't use floats or positioning */
}

.textarea-label textarea
{
  border: 0 none;
  margin: 0;
  outline: 0 none;
  padding: 0;
  width: 100%;
}

You should still be able to resize the textarea vertically without issues. If you use inline-block for the label, you should be able to resize horizontally as well.

The advantage of using the label is that clicking on the label will still focus the textarea as if you had clicked on the textarea. Additionally, using the descendant selector, you'll preserve your default textarea styles when you just need a plain-ol' textarea.

0 讨论(0)

查看其它4个回答