在输入内填充而不影响宽度

Question

我在填充输入内容方面遇到问题。 这就是我在没有添加任何内容的情况下看到输入的方式：

我想在$(function() { // Check for LocalStorage support. if (localStorage) { // Add an event listener for form submissions $('form').on('submit', function() { // Get the value of the email field. var email = $('#email').val(); // Save the name in localStorage. localStorage.setItem('#email', email); $('#guestEmail').html(email); console.log(localStorage.getItem('#email')); }); } var emailLocalStorage = localStorage.getItem('#email'); console.log(emailLocalStorage); if (typeof emailLocalStorage != "undefined" && emailLocalStorage != "null") { $('#guestEmail').val(emailLocalStorage); console.log(emailLocalStorage) } else { $('#guestEmail').val(""); } }); 和内容placeholder中添加填充内容，当我尝试添加：

value

这发生了：

你可以看到：

1. input{ padding-left: 10px; } 具有100％的宽度，但是将填充添加到输入会使它们超过最大宽度。
2. 当我在同一行中有两个输入时，它们会相互重叠。

我尝试使用百分比来改变每个输入的textarea以获得看起来不错的东西，但是当屏幕的大小发生变化并变得敏感时，它就成了一个问题。

所以，我尝试了另一个解决方案;我更改了填充和调整大小，为此：

width

但是现在，我还有另外一个问题，即解决我的问题，因为这会添加填充，但仅限于::-webkit-input-placeholder { padding-left: 10px; } :-moz-placeholder { /* Firefox 18- */ color: grey; padding-left: 10px; } ::-moz-placeholder { /* Firefox 19+ */ padding-left: 10px; } :-ms-input-placeholder { padding-left: 10px; } 而不是内容placeholder。



我该如何解决我的问题？任何想法？

Answer 1

您可以使用box-sizing属性更改框模型的计算方式。

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

这样，您可以将填充添加到输入本身而不是占位符文本。更加一致。