1

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

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

4

3 回答 3

2

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

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

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

于 2013-05-15T15:39:22.287 回答
2

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

于 2013-05-15T15:30:13.787 回答
0

为什么不试试 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" />

于 2016-03-14T14:43:36.463 回答