我想删除输入字段的默认居中(垂直对齐),我尝试使用:
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;
}
最佳答案
垂直对齐不适用于文本输入元素,它总是垂直居中,所以你需要做的是不设置定义的高度。在这种情况下,您通过设置明确的顶部和底部来执行此操作,因此删除第 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/)
关于html - css 移除输入文本居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16268699/