CSS content attr()不起作用

Question

我正在尝试使用CSS制作一个简单的提示框输入占位符，但今天事情并不像我预期的那样顺利。

    #formulier input:focus::-webkit-input-placeholder:after {
      content: attr(tip) "test"; /**/
      position:absolute;
      right:0;
      display:inline-block;
      color:red;
    }

“测试”内容输出正常，但我无法获取attr（tip）。 请查看我在此处创建的小演示（由于WebKit仅限于Chrome和Safari）。

http://jsbin.com/ApIvawO/5/edit

提前感谢您的帮助:D

- Sander

---

你确定 content:"foo"; 能够工作吗？在 input 元素中，content 本来就不应该起作用。 - BoltClock

抱歉，忘了提到演示仅适用于Chrome和Safari浏览器。由于-webkit的原因... - Sander

好的，你应该在这里粘贴整个CSS规则，以便清楚地表明你正在使用带有“content”属性的WebKit功能。 - BoltClock

我认为问题出在作用域上。我认为在css触发时，它并没有针对输入框触发，而是针对没有任何相关属性的占位符触发了。 - Spdermn02

@Spdermn02 我也有类似的想法，但即使直接使用输入元素也无法产生所需的结果。 - Deryck

Answer 1

你需要用 span 包装那些输入字段。在 CSS 中引入的内容是在选择器的内容之后引入的，例如 input，并不包含内容，因此在 input 上使用 content:''; 是无效的。要么使用标签，要么将 span 放在输入字段周围。

- Grant Briston