Question

根据下面的表单代码，是否可以通过读入相邻标签的文本来填充表单输入字段的占位符属性

Raw html

<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL">
</div>

CSS转换后有效的所需输出

<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address">
</div>

换句话说，我想使用CSS（可能是生成的内容）在输入上动态添加占位符属性，并使占位符属性的值反映标签文本（或者如果在标签文本中读取超出硬编码的文本） CSS）

Answer 1

CSS无法修改HTML，因此无法实现。

生成的内容，顾名思义，指的是内容，而不是属性，因此也不能用于添加或修改属性。

Answer 2

我不确定你为什么不想使用Javascript / Jquery，但如果你改变主意，那就很简单了。

<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address</label>
    <input type="email" value name="EMAIL" class="required email" id="mce-EMAIL">
</div>

然后使用jquery你可以使用它：

var labelText = $('label').html();
$('#mce-EMAIL').attr('placeholder', labelText);

以下是fiddle

使用CSS从标签文本呈现输入表单占位符属性

2 个答案: