Question

我正在创建一个HTML表单，并希望它在输入字段之后显示图标，只要它们内部的数据发生了变化，我就很难通过CSS找到正确的方法。我目前有以下课程：

.ChangedInput
{
    border: 2px solid green;
}

.ChangedInput:after
{
    content:url('/Images/icons/table_edit.png');
}

这是我的输入元素：

<input type="text" name="DetailedDescription" size="160" class="ChangedInput" />

绿线正确应用为边框，但我希望teh table_edit.png图标出现在输入元素之后，唉它不是......

这是一个JSFiddle，展示了我想要实现的目标： http://jsfiddle.net/8Hh8L/

编辑：我应该说我想将这个图标应用于一组现有的表单，并且通过所有表单并更改输入元素将是一件痛苦的事。因此，我正在寻找一种解决方案，允许我将其应用于现有的输入元素。如果需要，使用Javascript / Jquery ...

Answer 1

Fiddle

input无法拥有::before或::after个元素。尝试在输入周围包裹<span>并执行span:after

或者之后只使用img元素，因为这也可以。

Answer 2

将字段集换行到span + input。这样的事情。

<fieldset>
  <input type="text" name="table-edit" placeholder="You Text Here..." />
  <span class="icon-table-edit"></span>
</fieldset>

然后是CSS ...

fieldset { position: relative; }
input { border: 2px solid green; }
span.icon-table-edit { position: absolute; right: 0; top: 0; background: url("your-image-path.jpg") no-repeat; }

...对跨度应用一些宽度和高度，并在必要时调整顶部。希望这有帮助...

Answer 3

这在可能的情况下有效

  input {
    background: white url(./calendar.svg) right no-repeat; /*Your Image Link*/
    padding-right: 17px;
   }

CSS：如何在输入元素后添加图标/图像

3 个答案: