Question

我有一个表单，每当有人输入信息不正确时，它会显示一条消息，我还希望错误文本旁边出现一个错误图标。我为错误消息添加了span标记，并在CSS中为它提供了一个.error图标类。我在选择器中添加了背景图像，但是当我在浏览器中预览时它没有出现。我检查了代码，我甚至无法在代码中看到.error图标类。我尝试在span标签之间添加，这是我在网站的一个表单中看到的，但是没有用。

我不确定使用什么方法来插入此图标，因为我知道为每个要应用错误图标的部分重复相同的图像src代码不是一个好习惯，因此我为什么要尝试使用它作为背景图片而不是。

这是我的代码： http://jsfiddle.net/HNSM4/2/

HTML

  <label for="name">
<span class="textStyle">Full Name*</span><input type="text" id="name"><br>
    <span id="nameMessage" class="message"><span class"erroricon"> &nbsp;</span>You must have a valid name</span>

CSS

.message{
display: none;  
}

.erroricon {
background-image:url('http://postimg.org/image/v6997l887/')
}

Answer 1

不要将图标放在作为背景图像的范围内，只需将其设为.message的背景图像，并在左侧添加填充，这样就不会占用空间：

.message{
    display: none;  
    background: url("http://s7.postimg.org/v6997l887/erroricon.png") no-repeat;
    padding-left: 20px;
}

您提供的图片是空白的，所以我没有任何内容可以显示，但您可以看到文本被推过，如果使用inspect元素，您可以看到图像已加载。

使用背景图像在窗体中显示错误图标

1 个答案:

JSFiddle

Here is an example以Google徽标作为背景图片。