Question

我有值ON或Off的输入字段，我想用CSS generated image.替换这可能吗？我问了一个similar question但关于表格中的单元格。我可以用CSS生成的图像替换单元格值。但是，我一直在使用INPUT Type=text字段摆弄，并且无法找到使用input类型字段进行相同替换的方法。我在这里看到一些使用存储在网址中的图片。但是使用CSS生成的图像而不是链接到图片会很棒。

代码（html，css，js）is here。

<div class="kn-input kn-input-short_text" id="kn-input-field_95">
  <label for="field_95" class="knack-input-label"> 
    <span class="kn-input-label">Cash</span>
  </label>
  <div class="input">
    <input id="field_95" type="text" value="On">
  </div>  
</div>

<div class="kn-input kn-input-short_text" id="kn-input-field_95">
  <label for="field_97" class="knack-input-label">
    <span class="kn-input-label">Internet</span>
  </label>
  <div class="input">
    <input id="field_97" type="text" value="On">
  </div>
</div>

sOn = '<div class="button-wrap"> <div class="button-out">On</div> <div class="button-switch"></div> </div>'

$('span:contains("On")').html(sOn);

最后一行代码用于替换表中的单元格值。我不知道如何对输入字段值执行相同的操作。

Answer 1

要替换输入字段，请执行以下操作：

$("input[type='text'][value='On']").replaceWith(sOn);

您的 FIDDLE 已在上线更新。

用CSS生成的图像替换输入字段中的文本

1 个答案: