html - 使用背景图像在表单中显示错误图标

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

与其将图标放在 span 中作为背景图片，不如将其作为 .message 的背景图片，并在左侧添加填充，这样就不会占用空间:

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

你提供的图片是空白的，所以我没有什么可以给你看的，但是你可以看到文本被推了过来，如果你使用 inspect element，你可以看到图片已加载。

JSFiddle

---

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