html - css 移除输入文本居中

Question

我想删除输入字段的默认居中(垂直对齐)，我尝试使用:

input[type="text} {
  vertical-align: top;
}

基本上，我正在构建一个“文本框”组件，它有一个占位符(以及后来的图标等)，看看下面的代码:

CSS:

<div class="textbox">
    <div class="textbox-placeholder">Username or email</div>
    <input type="text" class="textbox-input" />
</div>

HTML:

body {
    font: 400 16px/24px 'Lucida Grande', sans-serif;
}

.textbox {
    height: 50px;
    position: relative;
    background-color: #E1E1E1;
    border: 1px solid #CCCCCC;
}

.textbox-input {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

input[type="text"] {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: none transparent;
    font: inherit;
}

.textbox-input {
    z-index: 20;
}

.textbox-input {
    z-index: 10;
}

jsFiddle

Answer 1

垂直对齐不适用于文本输入元素，它总是垂直居中，所以你需要做的是不设置定义的高度。在这种情况下，您通过设置明确的顶部和底部来执行此操作，因此删除第 17 行或将底部设置为 auto 而不是 0。

.textbox-input {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    /*bottom: 0;*/
    left: 0;
}

查看更新后的 JS fiddle :http://jsfiddle.net/DTgty/2/

请记住，placeholder 属性现在已被大多数浏览器接受，因此可能想节省一些时间并改用它(就像我在这里使用的:http://jsfiddle.net/DTgty/3/)