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