輸入字段的輸入文本樣式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將確保您的文本「貼合」到底部。