seo Question posted in
Some basic information to get you started with this can be found here.

CSS Sprite – position to right of input? – SEO

I’m trying to get an input to load a CSS sprite, and put the icon I want out of it, right at the END of the input. Here is what I have so far:

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

Here is some code I have that works fine, but it uses an individual image (this is what is currently live, but we want to convert it into a sprite for 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;
}

Here is a JSFiddle to see the 2 running alongside each other:

https://jsfiddle.net/vr5emuar/

Can anyone explain where I’m going wrong? I’ve even tried using :after on the input (but it seems that doesn’t work, as you can’t use :before or :after on inputs)

Thanks!

Tags:

2

Answers


  1. 0

    ::after and ::before are pseudo-elements and an input can’t have element inside it.

    There are multiple solutions :

    • If you use css sprite, your sprite should be vertical and icons must be separated with some transparents pixel to avoid others icons to be visible in the input.
    • Use a span or i element around the input, it generate icon with pseudo-element (:after) and put it over the input with absolute positionning on :after and relative position on the span.
    Login or Signup to reply.
  2. 0

    You can do it like below only change needed is your sprite should be vertical.

     

.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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search