HTML5 placeholder css padding

前端之家收集整理的这篇文章主要介绍了HTML5 placeholder css padding前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经看过这个 post已经尝试了一切,我可以改变填充我的占位符,但唉,似乎它只是不想合作。

无论如何,这里是css的代码。 (编辑:这是从sass生成的css)

  1. #search {
  2. margin-top: 1px;
  3. display: inline;
  4. float: left;
  5. margin-left: 10px;
  6. margin-right: 10px;
  7. width: 220px;
  8. }
  9.  
  10. #search form {
  11. position: relative;
  12. }
  13.  
  14. #search input {
  15. padding: 0 10px 0 29px;
  16. color: #555555;
  17. border: none;
  18. background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  19. width: 180px;
  20. height: 29px;
  21. overflow: hidden;
  22. }
  23.  
  24. #search input:hover {
  25. color: #00ccff;
  26. background-position: 0px -32px;
  27. }

这里是简单的html:

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

很简单?占位符由于某种原因关闭,但是当您尝试在输入字段中键入时,文本是对齐的。看来你只能改变占位符的颜色(对于webkit),但是如果我尝试编辑包含输入的填充,它会破坏输入的设计!拉出头发

这里是占位符和具有文本输入的输入字段的屏幕:

编辑:

现在我已经诉诸于这个jquery plugin

它的开箱即用,它修复了我的chrome的问题。我仍然想发现什么问题是(如果它有关于我的chrome或东西)

我相信这不是样式,因为约翰·卡特菲尔德复制它没有问题,所以我希望有人在那里仍然可以指向我的方向,为什么这是发生在我(我的客户的铬,所以,这可能是原生的Chrome / OSX如果约翰使用Windows)

解决方法

我有同样的问题。

我通过从输入中删除行高来修复它。检查是否有一些导致问题的lineheight

猜你在找的HTML5相关文章