1

我想删除输入字段的默认居中（垂直对齐），我尝试使用：

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

4

1 回答 1

2

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

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

查看更新的 JS 小提琴：http: //jsfiddle.net/DTgty/2/

请记住，该placeholder属性现在已在大多数浏览器中被接受，因此可能希望节省一些时间并改为使用它（就像我在这里使用它：http: //jsfiddle.net/DTgty/3/）

于 2013-04-28T22:43:12.047 回答