bootstrap CSS樣式的文本輸入佔位符

我一直在絞盡腦汁解決這個問題，但我不是一個HTML/CSS專家，所以我走出了我的智慧。bootstrap CSS樣式的文本輸入佔位符

佔位符文本顯示距輸入框元素中心太高。

看到如下圖所示：

placeholder too high

我該如何解決這個問題？你可以看到他們住在http://siliconalley.com。當你在輸入內部輸入時，它實際上看起來沒問題。這只是看起來很奇怪的佔位符。

來源

2013-07-26 dashmug

你有沒有試着用線 - 螢火蟲/玩弄高度？ – deinqwertz

看起來不錯。不知道你的位置持有人是什麼意思。你是指垂直對齊嗎？但這看起來很好。 – Nitesh

@NathanLee佔位符是在輸入標籤中出現的文字，並在焦點上消失 –

您當前的行高爲1測試，改變它，所以它等於你的元素的高度和它的中心變爲。

line-height: 30px;

來源

2013-07-26 13:00:29

謝謝。這一個固定它。 – dashmug

你可以強制行高度樣式爲auto的值，這樣你就可以解決Chrome中的問題，並且不會在IE中搞砸。我在FF，Chrome和IE

.search-query { 
    line-height: auto !important; 
}

來源

2013-07-26 12:59:31

個人我會避免使用！重要的，如果有的話總是嘗試，並與您的選擇器更具體，！重要的只是一點點「哈克」我..當然這只是我的意見 – Richlewis

'自動'似乎不工作沒有！重要，除非我編輯bootstrap.css這是我不想做的事情。 – dashmug

您的line-height:1;聲明導致該問題。刪除這個.navbar-search .search-query它應該沒問題。

來源

2013-07-26 13:00:34 robooneus

你的CSS是這樣看
其實這是行高問題

.navbar-search .search-query { 
margin-bottom: 0; 
padding: 4px 14px; 
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif; 
font-size: 13px; 
font-weight: normal; 
line-height: 1; 
-webkit-border-radius: 15px; 
-moz-border-radius: 15px; 
border-radius: 15px; 
}

更改喜歡這個

.navbar-search .search-query { 
    margin-bottom: 0; 
    padding: 4px 14px; 
    font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 13px; 
    font-weight: normal; 
    line-height: 21px; /**change the Line-height to like this**/ 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    }

來源

2013-07-26 13:47:48

bootstrap CSS樣式的文本輸入佔位符

回答

相關問題