占位符文本不适合输入区域答案

【问题标题】：Placeholder Text Not Fitting Input Area占位符文本不适合输入区域
【发布时间】：2014-07-24 07:48:22
【问题描述】：

我很难为这个问题找到帮助，希望询问对试图解决这个问题的其他初学者有所帮助。

我的占位符文本不适合输入区域。填充似乎也不起作用（我取出了代码中的填充，因为它不起作用）。

html

<form>
<input type="text" placeholder="email">
</form>

css

form {
margin:60px auto;
width:350px;
}

input[type='text'] {
width:300px;
height:40px;
}

::-webkit-input-placeholder {
font-family:Open Sans, sans-serif;
font-size:16px;
}

:-moz-placeholder { 
font-family:Open Sans, sans-serif;
font-size:18px;  
}

::-moz-placeholder { 
font-family:Open Sans, sans-serif;
font-size:18px;  
}

:-ms-input-placeholder {  
font-family:Open Sans, sans-serif;
font-size:18px; 
}

【问题讨论】：

jsfiddle.net/9cWtJ 很合适....您在描述问题时必须更加具体。这有什么问题？
当我在 Chrome 中查看它时，它似乎不合适 - 占位符文本“电子邮件”被完全切成两半。
你检查过我创建的小提琴吗？在 Chrome 中对我来说效果很好。必须是其他干扰您的代码的东西。如果您可以创建自己的小提琴来重现问题，这将有助于我们为您提供帮助。
是的，看了小提琴，它在我这边被切断了。在这里尝试过：jsfiddle.net/eN2Nr
是否要求占位符文本大于输入文本？

标签： css forms placeholder

【解决方案1】：

如果您希望用户输入的文本与占位符的大小相同，则将该大小添加到输入中

input[type='text'] {
    width:300px;
    height:40px;
    font-family:Open Sans, sans-serif;
    font-size:18px;
}

http://jsfiddle.net/eN2Nr/2/

【讨论】：