Question

我有一个独特的情况，只有CSS可能无法解决。我们不能使用javascript或任何jquery，只能使用CSS。我正在处理一个我只能编辑CSS的Web应用程序。在应用程序提供的其中一个表单页面上，我想要更改其中一个字段的标签。该页面有几个表单域。我遇到的问题是表单的DIV ID是动态派生的。每个页面加载都会更改DIV ID。我有如下所示的HTML。我正在尝试将“问题”改为其他内容。

<div class="sm-form-field-overhead" id="yui_3_8_0_1_1378308546310_339">
<label class="sm-label" id="yui_3_8_0_1_1378308546310_340">The Question</label>
<div class="sm-form-field-container" id="yui_3_8_0_1_1378308546310_231">
    <textarea name="question" class="sm-form-field sm-form-field-textarea " id="yui_3_8_0_1_1378308546310_230"></textarea>
</div>
<div class="sm-form-field-description"></div>

我可以使用：before选择器在它前面添加文本，但这并不会隐藏其他文本并且它会定位页面上的每个表单字段而不仅仅是我尝试定位的表单字段

.sm-form-field-overhead .sm-label:before {
content: "Message";

}

我运气不好，或者您认为有解决方案吗？

这是我提出的完整和彻底的黑客攻击

.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
color: #242528;
padding-left: 182px;
}

这使现有文本颜色相同，并将其推向右侧

.sm-contact-pro-form:before {
content: "This is the new text";
position: absolute;
top: 215px;
left: 200px;
}

这会添加新文本。就像我说的那样，完全是黑客攻击，但它现在起作用了。感谢@Shauna的帮助，你让我指出了正确的方向。它不漂亮，但现在可以使用

Answer 1

嗯狡猾的一个，如果你想得到一点hacky，你可以隐藏label并将内容添加到父div，如下所示：

.sm-label{
    display: none;
}
.sm-form-field-overhead:before {
    content: "Message";
}

Answer 2

如果您做了类似的事情该怎么办：

.sm-form-field-overhead .sm-label:before {
    content: "Message   ";
}

.sm-form-field-overhead .sm-label { 
    display: inline-block; width: 40px; height: 20px; overflow: hidden; 
}

当然，我只是猜测宽度和高度，但这只会隐藏您不想显示的标签文本。

不是很优雅，但可能会紧张。

Answer 3

好吧，您可以像这样定位选择CSS：

div[id^="yui_3_8_0_1xxxxxx"] { ... }

“xxxxx”是你能看到的任何常数。

^基本上说：如果id以“yui_blahblahblah”为目标开始。

Answer 4

如果您可以找到用于命名textareas的模式，那么您可以使用一些聪明的CSS将其缩小到这些文本区域。

label[id^="yui_3_8_0_1"] {
  display: none;
}

textarea[id^="yui_3_8_0_1"]:before {
 content: "New label";
}

[id^="yui_3_8_0_1"]是一个带有“starts with”规范的属性选择器。所以它会选择任何带有以该链开头的id的标签或textarea。

这些是CSS 2.1选择器，应该具有良好的跨浏览器支持（IE7是唯一的例外）。但是，这取决于是否存在特定于文本区域本身及其相应标签的命名模式。上面的代码实际上也取决于它是页面上唯一的textarea。

您可以使上述内容更具体，但您将开始牺牲浏览器兼容性。

.sm-form-field-container[id^="yui_3_8_0_1"] textarea:first-child:before /* The first matching textarea */

.sm-form-field-container[id^="yui_3_8_0_1"]:last-child textarea:before /* The last matching textarea */

.sm-form-field-container[id^="yui_3_8_0_1"]:nth-child(3) textarea:before /* The third matching textarea, replace the 3 with whatever number to target the desired one. */

IE8不支持:last-child或:nth-child，但IE9及其他所有内容的相对最新版本都应该支持这三种中的任何一种。此外，使用这些容器时，您必须选择容器div，因为*-child选择器会根据它们在父容器中的位置选择它们。

ETA ：所以我看着你的测试页面，我注意到textarea保留了这个名字（我第一次回答这个问题时没有看到）。因此，您可以使用textarea[name="question"]来定位textarea本身。

困难的部分仍然是针对标签。不幸的是，textarea嵌套在一个div中，而且CSS无法在DOM中移动（所以没有从textarea中定位div）。我想不出任何方法可以获得一个标签，因为它没有它应该具有的for属性（这会使你的情况变得容易）。但是，您可以自己定位每个表单元素。这很糟糕，但它会完成工作。

.sm-label {
  display:none; /* Hide the labels */
}

/* Make new labels using pseudo-elements. */
[name="question"]:before {
  content: "New Label"
}

[name="yourname"]:before {
  content: "Original label"
}

/* Repeat for other form elements. */

您可以自己使用属性选择器，这允许您根据其属性定位元素，而不关心它是什么类型的元素（因此您可以将文本输入更改为textarea而不破坏样式）

就像我说的那样，它是黑客，因为它是一个核心世界，但它会完成工作，如果你只是做一次性的小型联系表格，也不会太麻烦。它确实有额外的好处，如果您将来选择，可以更改任何标签。

寻找CSS替换文本或目标动态DIV /类ID

4 个答案: