Question

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

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辅助解决方案。

Answer 1

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

Answer 2

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

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

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

Answer 3

为什么不尝试jQuery？但CSS没有编程

试试吧 http://codepen.io/KingRider/pen/vGXvoV

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

css内容属性可以与输入值选择器一起使用

3 个答案: