css - 带填充的 100% 宽度输入

Question

如何制作具有左/右填充 10px 并且将与其父级一样宽的 textarea/input。

textarea,input{
    padding:5px 10px 5px 10px; 
    width:100%;
}

在这种情况下，输入范围更广。

Answer 1

    textarea{
        box-sizing: border-box;
        width:100%;
        padding: 10px
    }

Answer 2

啊，好的旧盒子模型。填充添加到宽度中，因此为了达到预期的效果，您还必须在填充中使用百分比。尝试这个：

textarea, input {
   padding: 1% 2% 1% 2%;
   width: 96%;
}

Answer 3

您可以在相关问题中查看我的答案

jsFiddle 上的演示：

HTML 标记：

<div class="input_wrap">
    <input type="text" />
</div>

CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Answer 4

将边距属性添加到您的 CSS 代码。