首页 文章

HTML5占位符css填充

提问于
浏览 次
117

我已经看过这个post并尝试了一切我可以改变占位符的填充但是唉，似乎它只是不想合作 .

无论如何，这是css的代码 . （ EDIT ：这是sass生成的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 ），但如果我尝试编辑包含输入的填充，则会破坏输入的设计！拉出头发

以下是占位符和带有文本输入的输入字段的屏幕：

placeholder

text input

EDIT ：

现在我已经使用了这个jquery plugin .

它开箱即用，它修复了我的chrome问题 . 我还是想揭开问题所在（如果它与MY chrome有什么关系）

我很确定这不是风格，因为John Catterfeld没有任何问题地复制它，所以我希望那里的人仍然能指出正确的方向，为什么会发生这种情况（我的客户的铬也是如此 . 所以如果John正在使用Windows，这可能是Chrome / OSX原生的）

css html5 google-chrome webkit css3

12 回答

  • 0

    当我将os x上的Chrome更新到最新的稳定版本（9.0.597.94）时，我注意到了这个问题，所以这是一个Chrome错误，希望能够修复 .

    我很想不去尝试解决这个问题而只是等待修复 . 这只是意味着需要做更多的工作 .

    回复于
  • 0

    我有类似的问题，我的问题是侧边填充，解决方案是，文本缩进，我没有意识到文本缩进影响占位符侧位置 .

    input{
  text-indent: 10px;
}
    回复于
  • 0

    占位符不受 line-height 的影响且 padding 在浏览器上不一致 .

    我找到了另一个解决方案 .

    VERTICAL-ALIGN . 这可能是它唯一有效的时间，但尝试反而隐藏了许多CSS代码 .

    回复于
  • 1

    如果要保持行高并强制占位符具有相同的值，则可以直接编辑占位符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;
}
    回复于
  • 1

    设置 line-height: 0px; 在Chrome中为我修复了它

    回复于
  • 43

    我在John Catterfeld's blog找到了解决这个问题的答案 .

    ... Chrome（v20-30）实现了几乎所有的样式，但有一个重要的警告 - 占位符样式不会调整输入框的大小，所以要保持清晰，如行高和填充顶部或底部 .

    如果您使用行高或填充，您将对结果占位符感到沮丧 . 到目前为止，我还没有找到解决方法 .

    回复于
  • 27

    我遇到了同样的问题 .

    我通过从输入中删除行高来修复它 . 检查是否存在导致问题的线高度

    回复于
  • 0

    我用你的截图作为背景图片创建了一个小提琴并剥离了额外的标记，它似乎工作得很好

    http://jsfiddle.net/fLdQG/2/（需要webkit浏览器）

    这对你有用吗？如果没有，你能用你的确切标记和CSS更新小提琴吗？

    回复于
  • 22
    line-height: normal;

    为我工作;）

    回复于
  • 0

    删除行高确实会使您的文本与占位符文本对齐，但它无法正确解决您的问题，因为您需要根据此缺陷调整您的设计（这不是错误） . 添加vertical-align也不会成功 . 我没有在所有浏览器中尝试过，但它确实无法在Safari 5.1.4中使用 .

    我听说过jQuery修复此问题，这不是跨浏览器占位符支持（jQuery.placeholder），但是对于样式占位符，但我还没有找到它 .

    在此期间，您可以解析为the table on this page，它显示不同样式的不同浏览器支持 .

    编辑：找到插件！ jquery.placeholder.min.js为您提供完整的样式功能和跨浏览器支持 .

    回复于
  • 217

    我有一个问题，它出现在Internet Explorer中 . 输入字段已设置样式

    height:38px;
line-height:38px;

    不幸的是，在IE中，初始占位符似乎不在正确的位置 . 但当我点击该字段然后离开此字段时，占位符出现在正确的位置 .

    我的解决方案是：

    line-height:normal;
    回复于
  • 2

    删除行高或使用填充设置...它在所有浏览器中都有效

    回复于

相关问题