发表新帖
发表新帖

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

前端 未结
关注
15 2088
失恋的感觉
失恋的感觉 2020-11-29 14:44

I have the following CSS and HTML snippet being rendered.

<
相关标签:
15条回答
  • 遇见更好的自我
    2020-11-29 14:58

    This code works for me with IE8 and Firefox

    <td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
    0 讨论(0)
  • 忘掉有多难
    2020-11-29 14:58

    No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.

    I don't think it is OK with you to express padding and border widths in percentage of the parent too.

    0 讨论(0)
  • 执念已碎
    2020-11-29 15:00

    I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:

    textarea {
    border: 0px;
    width: calc(100% -10px);
    padding: 5px; 
}

    Or if you want to give the textarea a border:

    textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}
    0 讨论(0)
  • 情深已故
    2020-11-29 15:01 

    * {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}
    <div class="container">
  <div class="row">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" placeholder="Your name..">
  </div>
  <div class="row">
    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">UK</option>
      <option value="canada">USA</option>
      <option value="usa">RU</option>
    </select>
  </div>    
  <div class="row">
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
  </div>
</div>

    0 讨论(0)
  • 南笙
    2020-11-29 15:02

    let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.

    The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support. In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).

    The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to. Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.

    Taking a look at the W3C specifics other advantages we may notice are:

    • no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
    • if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.

    See W3C specifics for more detailed information.

    Simple example:

    .container { 
  width: 400px; 
  border: 3px 
  solid #f7c; 
  }
.textareaContainer {
	display: block;
	border: 3px solid #38c;
	padding: 10px;
  }
textarea { 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  border-width: 0; 
  }
    <body>
<div class="container">
	I am the container
	<label class="textareaContainer">
		<textarea name="text">I am the padded textarea with a styled border...</textarea>
	</label>
</div>
</body>

    The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want. I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.

    0 讨论(0)
  • 陌清茗
    2020-11-29 15:05

    You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.

    0 讨论(0)
 看不清?
提交回复
热议问题