CSS删除输入文字居中

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

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

来源

2013-04-28 onlineracoon

你的意思是像[this]（http://jsfiddle.net/DTgty/1/）？ – Vucko 2013-04-28 22:34:24

@PSCoder我不知道这是他想要的:) – Vucko 2013-04-28 22:36:45

@Vucko当你有我的jsFiddle，并开始在输入字段中输入时，你可以看到文本在中间垂直对齐，我想删除这个，但不知道如何 – onlineracoon 2013-04-28 22:42:52

垂直对齐文本输入元素无法正常工作，它会永远垂直居中，所以你需要做的是没有设置规定的高度上什么。在这种情况下，您通过设置明确的顶部和底部来完成此操作，因此请删除第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-28 22:43:12 Godwin

CSS删除输入文字居中

回答

相关问题