HTML5佔位符css填充

110

我已經看到這個post已經和嘗試了一切，我可以改變我的佔位符的填充，但唉，似乎它只是不想合作。HTML5佔位符css填充

無論如何，這裏是CSS的代碼。（編輯：這是從青菜中生成的css）

#search { 
    margin-top: 1px; 
    display: inline; 
    float: left; 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 220px; 
} 

#search form { 
    position: relative; 
} 

#search input { 
    padding: 0 10px 0 29px; 
    color: #555555; 
    border: none; 
    background: url('/images/bg_searchbar.png?1296191141') no-repeat; 
    width: 180px; 
    height: 29px; 
    overflow: hidden; 
} 

#search input:hover { 
    color: #00ccff; 
    background-position: 0px -32px; 
}

而這裏的簡單的HTML：

<div id="search"> 
    <form> 
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class=""> 
    </form> 
    <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;"> 
    <ul id="search-results" class="dropdown"> 
    </ul> 
    </div> 
</div>

很簡單？由於某種原因，佔位符處於關閉狀態，但當您嘗試輸入輸入字段時，文本是對齊的。看起來你只能改變佔位符的顏色（對於webkit），但是如果我嘗試編輯包含輸入的填充，它會破壞輸入的設計！ 翻出頭髮

這裏是佔位符的screenies與文本輸入的輸入域：

placeholder text input

編輯：

現在我已經使出這一jquery plugin 。

它開箱即用，它修復了我的Chrome的問題。我仍然想發現問題是什麼（如果它與我的鉻合金或某事有關）

我很確定這不是自從約翰Catterfeld轉載沒有問題以來的樣式，所以我希望如果約翰使用Windows，那麼這可能是Chrome/OSX原生的）

來源

2011-02-07 corroded

你能提供生成的CSS嗎？與SASS來源相比，這樣做更容易。 – RoToRa 2011-02-07 09:52:28

+1這個插件非常棒 - 簡單並且擁有我需要的選項。可能最好的佔位符解決方案我偶然發現，直到現在。 – easwee 2011-06-21 13:36:51

如果任何人有引導程序設置的問題這兩個選項幫助：font-size：large;而不是px;和line-height：正常; – necker 2013-12-17 10:31:29

213

我得到了同樣的問題。

我通過從輸入中刪除行高來修復它。檢查是否存在導致問題的線高度

來源

2011-04-15 13:08:40 Johansrk

我已經創建了一個小提琴使用您的截圖作爲背景圖像和剝離額外的標記，並且它似乎工作正常

http://jsfiddle.net/fLdQG/2/（需要webkit瀏覽器）

這是否適合您？如果沒有，你可以用你的確切標記和CSS更新小提琴嗎？

來源

2011-02-07 12:25:29 ajcw

嗯我檢查了鏈接，它也不適用於我。你認爲我的Chrome中有插件/東西導致它？截圖：http://grab.by/8OFf – corroded 2011-02-07 14:34:39

使用Safari瀏覽器檢查它，它的工作原理。不應該鉻和Safari瀏覽器呈現相同的東西？ – corroded 2011-02-07 14:36:28

嗯，我沒有意識到這樣會影響你的佈局的插件，但Chrome和Safari都適合我（對，他們應該呈現相同的東西）。 – ajcw 2011-02-07 14:51:21

當我將os更新到最新的穩定版本（9.0.597.94）時，我注意到了這個問題，所以這是一個Chrome bug，希望能夠修復。

我不想嘗試解決這個問題，只是等待修復。這只是意味着更多的工作把它拿出來。

來源

2011-02-11 11:04:48 will

佔位符不受line-height和padding在瀏覽器上不一致的影響。

雖然我找到了另一個解決方案。

VERTICAL-ALIGN。這可能是它唯一的工作時間，但是嘗試這種方式會導致很多CSS代碼行。

來源

2011-10-02 13:04:45

刪除行高實際上會使您的文本與佔位符文本對齊，但它不能正確地解決您的問題，因爲您需要根據此缺陷調整設計（這不是錯誤）。添加垂直對齊也不會完成交易。我沒有嘗試過所有瀏覽器，但在Safari 5.1.4中無法正常工作。

我聽說過這個jQuery修復，這不是跨瀏覽器的佔位符支持（jQuery.placeholder），但對於樣式佔位符，但我還沒有找到它。

與此同時，您可以解析爲the table on this page，其中顯示不同的瀏覽器支持不同的樣式。

編輯：找到了插件！ jquery.placeholder.min.js爲您提供完整的樣式功能和跨瀏覽器支持。

來源

2012-03-19 13:37:14 zykadelic

如果您希望保持行高並強制佔位符具有相同的寬度，則可以直接編輯自較新瀏覽器版本以來的佔位符CSS。該訣竅對我來說：

input::-webkit-input-placeholder { /* WebKit browsers */ 
    line-height: 1.5em; 
} 
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    line-height: 1.5em; 
} 
input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    line-height: 1.5em; 
} 
input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    line-height: 1.5em; 
}

來源

2013-06-05 01:51:41 floribon