CSS Sprite - положение справа от входа?

Я пытаюсь получить вход для загрузки спрайта CSS , и поставьте значок, который я хочу извлечь, прямо на END на входе. Вот то, что я до сих пор:CSS Sprite - положение справа от входа?

#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/

Может кто-нибудь объяснить, где я неправильно? Я даже попытался использовать : после на входе (но, кажется, не работает, так как вы не можете использовать : перед тем или : после на входах)

Спасибо!

источник

2015-10-28 Andrew Newby

http://stackoverflow.com/questions/6430981/using-a-sprite-image-with-input – j08691

Вы хотите календарную дисплей значок в одиночестве из стороны ввода , –

@ Ezhil-UIDeveloper - я хочу иметь его внутри * ввода * (как первый пример в моей jsfiddle). Кажется, я не могу этого сделать, хотя, если я хочу использовать CSS-спрайт :( –

::after и ::before являются псевдоэлементами, а вход не может содержать элемент внутри него.

Есть несколько решений:

Если вы используете CSS Sprite, ваш спрайт должен быть вертикальным и значки должны быть разделены с некоторыми транспарантами пикселем, чтобы избежать других значков, чтобы быть видимыми на входе.
Используйте элемент span или i вокруг ввода, он генерирует значок с псевдоэлементом (:after) и помещает его на вход с абсолютным позиционированием: после и относительное положение на пролете.

источник

2015-10-28 13:27:45

Спасибо - дадут это. Я пытался избежать создания вокруг него элемента оболочки, но похоже, что это будет единственное Вариант :( –

Вы можете сделать это, как показано ниже, только для изменения требуется ваш спрайт должен быть вертикальным.


 

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

источник

2015-10-28 13:43:48 imGaurav

CSS Sprite - положение справа от входа?

ответ

Смежные вопросы