0

我有一个独特的情况，仅使用 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 的帮助，你让我指出了正确的方向。它不漂亮，但它现在有效

4

4 回答 4

2

嗯，棘手的一个，如果你想有点hacky，你可以隐藏label并将内容添加到 parent div，如下所示：

.sm-label{
    display: none;
}
.sm-form-field-overhead:before {
    content: "Message";
}
于 2013-09-04T15:49:18.783 回答
1

如果你做了这样的事情怎么办：

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

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

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

不是很优雅，但可能会在紧要关头工作。

于 2013-09-04T15:50:51.680 回答
1

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

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

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

^ 基本上说：如果 id 以“yui_blahblahblah”开头，则定位它。

于 2013-09-04T16:25:33.433 回答
0

如果您能找到用于命名文本区域的模式，那么您可以使用一些巧妙的 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"]是一个具有“开始于”规范的属性选择器。所以它会选择任何带有以该链开头的 id 的标签或文本区域。

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

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

.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-childor :nth-child，但 IE9 和其他所有相对最新的版本应该支持这三个中的任何一个。此外，使用这些，您必须选择容器div，因为*-child选择器会根据它们在父容器中的位置来选择它们。

ETA：所以我正在查看您的测试页面，我注意到 textarea 保留了名称（我第一次回答问题时没有看到）。因此，您可以使用textarea[name="question"].

困难的部分仍然是针对标签。不幸的是，textarea 嵌套在一个 div 中，并且 CSS 不能在 DOM 中向上移动（因此不能从 textarea 定位 div）。我想不出任何方法来获得那个标签，因为它没有for它应该具有的属性（这会让你的情况变得太容易了）。但是，您可以单独定位每个表单元素。这是hacky，但它会完成工作。

.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 而不会破坏样式）。

就像我说的，它很hacky，因为它是一个核弹世界，但是如果你只是做一个一次性的小型联系表格，它会完成工作并且不会太麻烦。如果您将来选择，它确实具有允许您更改任何标签的额外好处。

于 2013-09-04T16:26:52.613 回答