Question

我试图获取一个输入来加载一个 CSS精灵，然后在输入的END处输入我想要的图标。以下是我到目前为止的情况：

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

这里有一些我运行良好的代码，但是它使用了一个单独的图像（这是现在的，但是我们想把它转换为SEO的精灵）;

#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 （但似乎无法正常工作，因为您无法使用：在之前：输入后）

谢谢！

Answer 1

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

有多种解决方案：

如果您使用css精灵，您的精灵应该是垂直的，并且图标必须与一些透明像素分开，以避免其他图标在输入中可见。
在输入周围使用span或i元素，它会生成带有伪元素（:after）的图标，并将其放在输入上，绝对位置为：后面和跨度上的相对位置。

Answer 2

你可以这样做，只需要改变你的精灵应该是垂直的。

＆＃13;

 

.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
   
}

＆＃13;

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

＆＃13;

CSS Sprite - 输入右侧的位置？

2 个答案: