css适用于输入文本而非文本区域(css works on input text not text area)

css适用于输入文本而非文本区域(css works on input text not text area)

这是一个jsfiddle

http://jsfiddle.net/2GpmW/

当我设置CSS时，我这样做了：

.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select { border: none; color: #525252; height: 30px; line-height: 15px; margin-bottom: 10px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 2px 0px 2px 5px; width: 400px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background: #DFDFDF; font-family: inherit; font-size: inherit; }

因此，当您看到css show应用于输入文本和文本区域时，但由于某些原因，文本区域旁边的标签变为向下，文本区域内的占位符不会垂直居中，因为它在输入文本中

请 ：

1-为什么会发生这种情况？

2-如何解决它

非常感谢

This is a jsfiddle

http://jsfiddle.net/2GpmW/

when I set the css, I did this:

.inputForm input[type="text"], .inputForm input[type="email"], .inputForm textarea, .inputForm select { border: none; color: #525252; height: 30px; line-height: 15px; margin-bottom: 10px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 2px 0px 2px 5px; width: 400px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background: #DFDFDF; font-family: inherit; font-size: inherit; }

so as you see the css show be applied to both input text and text area but for some reasons, the label beside the text area becomes down and place holder inside the text area is not centered vertically as it is in the input text

please :

1- why is that happening?

2- how to solve it

Many thanks

最满意答案

你必须使用这个：

textarea{ vertical-align: top; }

小提琴

vertical-align CSS属性指定内联或表格单元格的垂直对齐方式。

You have to use this:

textarea{ vertical-align: top; }

fiddle

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell element.