Question

我想删除输入字段的默认居中（vertical-align），我试图使用：

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小提琴：http://jsfiddle.net/DTgty/2/

请注意，大多数浏览器现在都接受placeholder属性，因此可能需要节省一些时间并使用它（就像我在此处使用的那样：http://jsfiddle.net/DTgty/3/）

css删除输入文本居中

1 个答案: