css内容属性可以和输入值选择器一起使用吗答案

【问题标题】：Can css content property be used with input value selectorcss内容属性可以和输入值选择器一起使用吗
【发布时间】：2013-05-10 06:23:57
【问题描述】：

有没有办法在输入框的值前面加上一些文本？这就是我正在尝试的：

http://jsfiddle.net/uuHBB/

html:

<div class="test">
    test
</div>
<input type="text" value="1" />
<input type="text" value="2" />

CSS：

input[value]:before {content:"Number:";}
input[value] {color: blue;}
.test:before {content:"This is a ";}

我可以将文本添加到 div 并更改输入值的颜色，但它似乎不喜欢将文本添加到输入值。

如果这不能用 CSS 完成，我想要一个 JavaScript/jQuery 辅助解决方案。

【问题讨论】：

CSS content generation before 'input' elements的可能重复
对于“更智能”的输入字段，您将需要 JavaScript/jQuery 辅助解决方案。请在关闭之前重新表述您的问题。您的问题的简短回答是“不”，CSS 不能像前面的问题中所报告的那样自行完成。但是，您仍然需要一个可行的解决方案，因此修改您的问题将得到您所需要的。
是的，看起来 javascript 是前进的方向。至少我没有错过明显的东西！ @MarcAudet 目前有点着急，这并不重要，所以稍后会调查。

标签： jquery css

【解决方案1】：

您不能在replaced elements 上使用伪元素作为CSS does not define 这些元素（图像、表单控件、对象、画布）的内容，因此虽然可以通过将输入包装在另一个元素中或只是通过使用伪元素本身，它不会跨浏览器兼容，因为它的行为实际上取决于 UA。您正在租船进入未知领域..

【讨论】：

【解决方案2】：

:before 适用于元素的内容。由于input 标签没有内容，:before 不适用于输入。您应该将输入包装在 div 中并为 div 编写 css 规则。

无法将可显示的文本放入输入中。您可以将文本添加到元素的值中，或者您可以使用 css 将伪元素放置在输入框上方并增加输入框的左填充以为该元素腾出空间。或者你可以只使用placeholder 属性。

另外，请注意input[value] 选择器与input 选择器引用相同的元素，因为[value] 为元素的属性添加了条件，但不会改变被选择的内容（在这种情况下为input 标记） . HTML 树中没有单独的“值”元素，因此您不能像这样选择它。

【讨论】：

【解决方案3】：

为什么不试试 jQuery？但 CSS 不会编程

让我们试试吧 http://codepen.io/KingRider/pen/vGXvoV

$(document).ready(function() {
  for (x=0;x<$('input[value]').length;x++) {
    $('input[value]:nth('+x+')').val('Number:'+ $('input[value]:nth('+x+')').val())
  }
});

/* input[value]:before {content:"Number:";} */
input[value] {color: blue;}
.test:before {content:"This is a ";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="test">
    test
</div>
<input type="text" value="1" />
<input type="text" value="2" />

【讨论】：