我怎么可以做一个TextArea100％的宽度不满时填补存在CSS?

StackOverflow https://stackoverflow.com/questions/271067

  •  06-07-2019
  •  | 
  •  

题

我有以下CSS和HTML段正在呈现的。

textarea
{
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <textarea cols="2" rows="10" id="rules"/>
</div>

是的问题是，文本地区结束正8px更广泛的(2px边境+6px填补)于父母。有没有办法继续使用边境和填充，但限制的总尺寸 textarea 宽的父亲吗？

有帮助吗？

解决方案

为什么不呢？忘记黑客并用CSS做它？

我经常使用的一个：

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

请参阅浏览器支持此处。

其他提示

许多CSS格式问题的答案似乎是<！>“;添加另一个<！> lt; div <！> gt;！<！>;

所以，在这种精神中，您是否尝试添加应用了边框/填充的包装div，然后将100％宽度的textarea放入其中？像（未经测试）的东西：

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

让我们来考虑 最后输出的呈现用户 我们想要实现的：一种填充textarea与双边和填充，其特点是，被击，他们通过注重我们的文本区域，并将利用一个自动100％的宽度典型的框要素。

最好的办法在我看来是采用低级别解决方案尽可能达到的最高浏览器的支持。在这种情况下的唯一HTML能工作的现，避免了使用Javascript(这无论如何我们都爱).

标签标记在我们的帮助，因为有这种行为的并且是允许含有输入的元素，它必须解决。其默认的风格是一个内联要素，因此，给人的标签一块显示的风格我们可以利用自己的自动100％的宽度，包括填充和边界，而内textarea没有边界，没有填充和100%的宽度。

看看W3C的具体情况的其他优点，我们可能会注意到：

  • 没有"对"的属性是必要的：当标签标记含有输入的目标，它会自动重点的孩子输入，点击时;
  • 如果一个外在标签的文本区域已设计，没有发生冲突，因为给出的输入可能有一个或多个标签。

看看 W3C的具体细节 更详细的信息。

简单的例子：


<html>
<head>
<style type="text/css">
.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; }
</style>
</head>



<body>
<div class="container">
 我的容器
 <label class="textareaContainer">
 <textarea name="text">我的软垫textarea与一个风格的边界...</textarea>
    </label>
</div>
</body>
</html>

填充和边界。textareaContainer素是那些我们想要给textarea.试图编辑他们的风格吧你想要的。我给大和可见的填充和边界。textareaContainer元让你看到他们的行为时，点击。

如果你对填充的宽度不太感兴趣，这个解决方案实际上也会保持填充的百分比。

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

不完美，但你会得到一些填充物，宽度加起来达到100％所以它很好

我遇到了另一个解决方案这里非常简单：添加填充权限到textarea的容器。这样可以保留textarea上的边距，边框和填充，从而避免了Beck指出的关于chrome和safari在textarea周围放置的焦点突出显示的问题。

容器的填充权限应该是textarea两侧的有效边距，边框和填充的总和，以及您可能需要的容器填充。因此，对于原始问题中的情况：

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}


<div class="textareacontainer">
    <textarea></textarea>
</div>

此代码适用于IE8和Firefox 

<td>
    <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>

您可以使用box-sizing属性，所有符合标准的主要浏览器和IE8 +都支持它。但是，您仍然需要针对IE7的解决方法。阅读更多此处。

不，你不能用CSS做到这一点。这就是微软最初推出另一款可能更实用的盒子模型的原因。最终获胜的盒子模型使得混合百分比和单位变得非常实用。

我认为用父母的百分比来表达填充和边框宽度也不行。

我一直在寻找一种内联样式解决方案而不是CSS解决方案，这是我能为响应式文本区域提供的最佳解决方案：

<div style="width: 100%; max-width: 500px;">
  <textarea style="width: 100%;"></textarea>
</div>

如果你这样填充和偏移它：

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

textarea的右侧与容器的右侧完美对齐，和 textarea内的文本与容器中的正文文本完美对齐...以及左侧的textarea'突出'了一下。它有时更漂亮。

使用盒子大小调整属性：

-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box;

这将有所帮助

对于使用Bootstrap的人来说，textarea.form-control也会导致textarea大小调整问题。 Chrome和Firefox似乎使用以下Bootstrap CSS使用不同的高度：

textarea.form-conrtol{
    height:auto;
}

负利润怎么样？

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

我经常用calc()解决这个问题。你只需给textarea一个100％的宽度和一定量的填充，但是你必须减去你给textarea的100％宽度的总左右填充：

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

或者如果你想给textarea一个边框：

textarea {
    border: 1px;
    width: calc(100% -12px); /* plus the total left and right border */
    padding: 5px; 
}


* {
    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>

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top