为什么我的图片没有显示：在我的文字输入之前？

Question

我想在输入文字之前找到一张图片。我尝试过：没有运气或图像的标志！

http://jsfiddle.net/4U9uW/

<input type="text" class="form-control vrm-input" id="vrm" name="vrm" placeholder="" maxlength="10">

.vrm-input:before {
    background: url("http://www.byplug.com/oink.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: " ";
    height: 112px;
    left: -61px;
    position: absolute;
    top: 10px;
    width: 61px;
    z-index: 100;
}

我确定它很简单。谢谢！

Answer 1

您不能在 <input> 元素中使用：before 选择器，您应该使用 <div> 元素之外的元素，

检查此 Demo jsFiddle

HTML

<div class="vrm-input">
    <input type="text" class="form-control" id="vrm" name="vrm" placeholder="" maxlength="10" />
</div>

CSS

.vrm-input:before {
    content: url("http://www.byplug.com/oink.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 112px;
    left: -10px;
    position: relative;
    top: 10px;
    width: 61px;
    z-index: 100;
}

Answer 2

<input>元素没有'内容'，它们不像div，p，span：<div>here goes ::before content ::after</div>

查看https://stackoverflow.com/a/4574946/1666071了解详情。