CSS Sprite - 输入右侧的位置？

Question

我正在尝试获取输入以加载 CSS 精灵，并将我想要的图标放在输入的末尾.这是我目前所拥有的：

#test2 {
    width: 140px;
    outline:0;
    background: url(http://www.chambresdhotes.org/new_design/sprites-all.png) -87px -97px no-repeat;
}

这是我的一些代码，工作正常，但它使用单个图像（这是当前有效的，但我们想将其转换为 SEO 的 sprite）；

#test1  {
    width: 140px;
    background-image:url(http://www.chambresdhotes.org//new_design/bookings/images/calendar1.png);
    background-repeat:no-repeat;
    background-position:95% center;
    outline:0;
}

这是一个 JSFiddle，可以看到 2 运行彼此并排：

https://jsfiddle.net/vr5emuar/

谁能解释我哪里出错了？我什至尝试在输入上使用 :after （但它似乎不起作用，因为你不能使用 :before 或:输入后)

谢谢！

Answer 1

::after 和 ::before 是伪元素，输入不能包含元素。

有多种解决方案：

如果你使用 css sprite，你的 sprite 应该是垂直的并且图标必须用一些透明像素分隔以避免其他图标在输入中可见。
在输入周围使用 span 或 i 元素，它会生成带有伪元素的图标 (:after) 并将其放在输入上，绝对定位在 :after 上，相对位置在 span 上。

Answer 2

你可以像下面那样做，唯一需要改变的是你的 sprite 应该是垂直的。

 

.input {border:none; float:left;padding:1px; outline: 0;}
.calander{
    border:1px solid #efefef;
    display:inline-block;
    float:left;
    background: url(http://www.chambresdhotes.org/new_design/sprites-all.png)  no-repeat scroll 85px -94px  #fff;
    width:190px;
   padding: 4px 4px 6px 0px
   
}

    
<div class="calander"><input type="text" class="input" /></div>

CSS Sprite - 输入右侧的位置？

CSS Sprite - position to right of input?

css

sprite