输入字段的输入文本样式html css

Question

我在底部有一行输入字段，非常像教科书的一行。我希望能够显示占位符文本以及用户输入的文本稍微在行上方。

我做了一个小提琴在这里：http://jsfiddle.net/H7AVP/

这是我的HTML是什么样子：

<input type="text" placeholder="subscribe for early access" class="form-control email"> 

而我的CSS（不跨浏览器的问题，优化）：

.email::-webkit-input-placeholder { 
    font-family: 'Open Sans', sans-serif; 
    font-size: 25px; 
    padding-bottom:45px; 
    margin-top:-10px; 
} 

input { 
    background-color: #2980b9; 
    outline: 0; 
    border-bottom: 2px; 
    border-top: 0; 
    border-left: 0; 
    border-right: 0; 
    border-bottom-style: double; 
    border-bottom-color: #34495e; 
    height: 46px; 
    width: 300px; 
} 

input:focus{ 
    outline:0; 
} 
textarea:focus{ 
    outline:0; 
} 

Answer 1

我想到的最简单的方法是将line-height设置为input至40px。由于它具有固定的高度，因此将文本移动到底部可以很好地工作。

Answer 2

根据我的理解，您希望占位符和输入位于中心位置。

添加以下

.email{ 
    padding-bottom:10px; 
} 

和形式> DIV>输入的CSS文件加载{高度：30像素;}

这里是http://jsfiddle.net/H7AVP/

Answer 3

这里有两个变化：

1：http://jsfiddle.net/H7AVP/5/

由defa删除任何特定的height或padding将使文本与其周围的边框保持“贴合”。从那里，只需添加填充左/右+填充顶部。我相信这应该会给你想要的效果。

之后，只需将通用输入本身中用于-webkit-input-placeholder的样式移动即可。然后，如果您只想区分颜色，请将其专门添加到-webkit-input-placeholder。

此外，尽可能使用简写CSS方法更新。

2：http://jsfiddle.net/H7AVP/6/

现在，如果你希望你的文字来获取与底边框友好，那么就简单地将一组height到输入元素。顶部padding将确保您的文本“贴合”到底部。