CSS輸入字段樣式魔術

我想以一致的方式設置輸入字段和一些按鈕的風格，但似乎有一些魔術正在進行。雖然輸入的事件與按鈕的類別完全相同，但稍高一些。此外，佔位符文本垂直對齊輸入的文本（高一個像素）。這可以通過跨瀏覽器解決方案解決嗎？CSS輸入字段樣式魔術

編輯：正如JanTuroň指出的那樣，行高解決了Webkit中的問題。現在，如果您在Firefox中檢查codepen，您會注意到該元素仍具有1px邊框。如何擺脫這一點？

THX，PS

HTML

<form action=""> 
    <a href=""class="btn">Button</a> 
    <input type="text" class="btn" placeholder="input"/> 
    <button class="btn">Login</button> 
    <a href=""class="btn">Button</a> 
</form>

CSS

.btn, input, button { 

    display: inline-block; 
    vertical-align: middle; 
    line-height: 15px; 
    font-size: 15px; 
    font-family: sans-serif; 

    border: 0; 
    padding: 0; 
    margin: 0; 

    cursor: pointer; 
    cursor: hand; 

    text-decoration: none; 
    color: #f2f2f2; 
    background-color: #1a1a1a; 
    padding: 7px 12px 8px 12px; 
    margin-right: 1px; 
    margin-bottom: 1px; 

}

來源

2013-05-20 Peter Schmidler

更改該行高度知識+解決烏爾垂直間距問題與輸入是較大的。大概另一種方式來做到這一點也http://codepen.io/anon/pen/vbtJI – Michael

我不會建議使用頂部和底部填充表單元素。相反，使用絕對高度和正確的線高來獲得理想的效果。這樣，無論您瀏覽什麼瀏覽器，它都會始終保持相同的高度。 – ntgCleaner

的line-height不收縮低於font-size輸入高度加上一些像素see the MDN info：

在替換內聯元素（如按鈕或其他輸入元素）時，行高無效。

只需卸下line-height，你應該得到你想要的東西，即使沒有應用height風格。設置line-height到130％也似乎工作。

來源

2013-05-20 21:11:18

我試圖解決這個問題，並且每個解決方案都不是完整的，並且不適用於不同的瀏覽器。

我發現這個代碼做的工作：

float: left; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
height: 33px;

我已經更新Codepen - http://codepen.io/anon/pen/pvqRwE

來源

2015-03-19 20:08:54 Dampas

CSS輸入字段樣式魔術

回答

相關問題