html - html.textboxfor 中的图像

Question

我正在改进我的元素设计，我想在我的 @html.textboxfor 中添加水印。我能够添加它，但它不适用于 IE 8。因此，我想在我的 @html.textboxfor 中添加一个图像，以便用户知道应该在 textbox 即使水印不起作用。

问题是我无法让它工作。我尝试了从网上搜索的 CSS，但没有一个起作用。

这是它的外观示例。提前致谢。

Answer 1

有几种方法可以做到这一点。

1- 是为了给人一种在输入文本字段中有图像的错觉。

两种方式是为输入字段设置背景。

方法一:

举个例子:

JS-FIDDLE-DMEO

HTML:

<div class="some-input-parent" style="border: 1px solid #DDD;">
   
      <input class="some-input" style="border: none; "/>   
      <img class="some-input-img"  src="yourImage.png"/>   

</div>

CSS:

.some-input{
width:120px;
}
.some-input-img{
width:15px;
}

.some-input-parent{
  width:140px;
 }

诀窍是有一个包含输入字段的 div 或 span ，并且 div 将对齐图像向右或向左(根据您的需要)。

跨度的宽度将等于文本字段的宽度 + 图像的宽度 + 一些用于边框、填充等的额外空间。

---

---

方法二:

设置背景后，通过指定其位置将其推到右侧。然后向输入字段添加填充以为其提供外部宽度，以便我们防止文本与图像重叠。

JS-FIDDLE-DEMO2

HTML:

<input class="real-input" type="text" />

CSS:

.real-input
{
    background-image: url(youIcon.png");
    background-position: 119px 0;
    background-repeat: no-repeat;
    background-size: 17px auto;
    padding-right: 26px;
    width: 111px;
}

结果: