高度未应用于没有边框的搜索框

Question

我有一个类型搜索的输入，我正在尝试调整其高度。除非我对元素应用边框，否则高度永远不会实际反映出来。我试过在元素本身上使用line-height，font-size，min-height，max-height和height属性，似乎没什么用。有没有办法在不应用边框的情况下调整搜索框的大小？

#search{
	display:block;
	width:90%;
	margin:10px auto 0;
	height:50px;
}
#searchborder{
	display:block;
	width:90%;
	margin:10px auto 0;
	height:50px;
    border:1px solid black;
}

<input id="search" type="search">
<input id="searchborder" type="search">

更新 因此，在检查Windows机器后，似乎搜索输入正确呈现，以供参考，这是我在Mac上看到的内容。

如何在OSX上正确渲染？

Answer 1

大多数情况下，这两个CSS / HTML片段单独运行完全相同并且应用了高度。唯一的区别是你可以在#searchborder输入上看到边框。

但是，搜索输入可以在不同的操作系统和浏览器中以不同方式呈现。使用OSX可能会让Webkit变得棘手。请参阅以下有关样式化CSS搜索输入的文章：

https://css-tricks.com/webkit-html5-search-inputs/

该页面底部的建议是通过添加CSS行来删除webkit外观，然后将应用高度：

#search{
-webkit-appearance: none;
display:block;
width:90%;
margin:10px auto 0;
height:50px;}