html.textboxfor中的图像

Question

我正在加强项目的设计，我想在@html.textboxfor中添加水印。我能够添加它但它不能在IE 8上工作。因此，我想在我的@html.textboxfor中添加一个图像，以便用户知道应该在{{1}内给出或输入的内容即使水印不起作用。

问题是我无法使其发挥作用。我尝试过从网上搜索过的CSS，但没有一个能正常工作。

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

Answer 1

有几种方法可以实现这一目标。

1-是给出在输入文本字段中显示图像的错觉。

2-方式是输入字段的背景。

方法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将使图像与右侧或左侧对齐（根据您的需要）。

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

---

---

方法2：

设置背景后，通过指定背景将其向右推。然后在输入字段中添加填充以使其具有外部宽度，以便防止文本与图像重叠。

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;
}

结果：