如何使用CSS更改标签（label）？

Question

如何使用CSS更改标签（label）？

8

我试图改变一个HTML的标签内容，但是我没有权限修改HTML。因此，我尝试使用CSS来改变这个文本。有没有选择器可以识别下面的标签？如果有的话，如何将文本显示为“Organization”，而不是“Company”？谢谢。

<div class="control-group">
<label class="control-label" for="company" style="">Company</label>
<div class="controls">
<input id="settings-company" class="settings-company input-xlarge" type="text" data-config="required" value="My Organization" name="company">
</div>
</div>

- Isaac Y

2

你需要使用jQuery或JavaScript来修改DOM，不能通过CSS进行更改。 - Jay Patel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- drip · Accepted Answer

18

使用font-size:0;隐藏文本，并添加一个伪元素。

label { font-size: 0; }
label:before { content: "Organization"; font-size: 14px; }

- drip

Drip，谢谢这个……如果我在页面上有多个标签，有没有办法唯一标识这个？该 HTML 元素的唯一标签是“for=company”。 - Isaac Y

3

您可以这样针对它进行定位：label[for="company"]{ }。 - drip

这将隐藏任何标签，并在所有标签中显示“组织”。对@drip的评论加1，但不是回答（如果您修改它以解释该点，则为回答+1）。对于两者都减1，因为它没有按要求更改内容，只是更改了“大多数用户可以看到”的内容。任何爬虫都会找到“公司”，屏幕阅读器将朗读“公司”...总之。 - miguel-svq

我认为这不是一个好的解决方案。我没有点赞或点踩，但内容应该在html中，样式在css中，混合“信息”和“外观”并不是一件好事。（仍然在考虑是否有更好的解决方案，也许不存在） - miguel-svq

1

@miguel-svq 问题是“如何使用CSS更改标签的标签”，而不是“如何正确地定位标签”。;)因为我们可以开始争论为什么CSS在一行上，为什么伪元素使用:而不是::，为什么我使用px等等...（这些超出了问题的范围）当然，这不是一个好的解决方案，但对于您无法更改HTML结构或添加JS的页面，它可以工作。（例如Shopify结帐页面，只允许进行CSS更改，而不允许其他任何更改） - drip