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输入字段样式魔术

回答

相关问题