高度沒有被應用到沒有邊框的搜索框

我有一個我試圖調整高度的類型搜索輸入。除非我對元素應用邊框，否則高度永遠不會實際反映出來。我已經嘗試過使用行高，字體大小，最小高度，最大高度和元素本身的高度屬性，似乎沒有任何工作。有沒有辦法在不應用邊框的情況下調整搜索框的大小？高度沒有被應用到沒有邊框的搜索框

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

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

更新所以在Windows計算機上檢查後，好像搜索輸入正確的渲染，以供參考這裏是我看到我的Mac上。 screenshot from my mac

任何方法來使這個呈現在OSX上正確？

來源

2015-04-03 Astraub

代碼段中的兩個搜索框都反映了Chrome，Firefox和IE11的高度風格。 – 2015-04-03 17:10:28

我不知道我是否理解這個問題的高度應用方式，但你只是沒有看到邊緣，可以說你應用了背景，邊框或沒有邊框的應用高度將是可見的 – 2015-04-03 17:11:37

我認爲這是一個問題OSX。在我的電腦上，第一個搜索框只有15或20像素高。我在同事的win7機器上拉起了這個頁面，看起來很好。我在我的Mac上檢查了Chrome，Firefox和safari。 – Astraub 2015-04-03 17:19:40

大多數情況下，這兩個CSS/HTML代碼段的功能完全相同，並且已應用了高度。唯一的區別是您可以在#searchborder輸入中看到邊框。

但是，搜索輸入可以在不同的操作系統和瀏覽器中呈現不同的效果。 OSX可能會很棘手。看到造型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;}

來源

2015-04-03 17:33:39 tnschmidt

高度沒有被應用到沒有邊框的搜索框

回答

相關問題