SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question styling input button with a sprite

    I'm trying to create an input button using a sprite and span for text replacement. i'm not very good with forms though, and it's just not working for me..the background image isn't showing up at all, just a 120x55 grey box. here is my code

    Code:
    input#search {
    	float:right;
    	position:relative;
    	border:0 none;
    	width:120px;
    	height:55px;
    }
    input#search span{
    	position:absolute;
    	background:url('../images/home-search.gif') no-repeat scroll 0px 0px transparent;
    	width:120px;
    	height:55px;
    	top:0;
    	left:0;
    	}
    HTML Code:
    <input id="search" type="image" src="images/home-search.gif" value="SUBMIT" alt="submit"><span></span></input>
    everything I try just makes me more confused! lol. i tried googling it but I can't seem to find any examples or writeups on this. can someone help me?

    thank you!

  2. #2
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Input tags are self ending. You don't use </input>

    Put the background on the actual input element.

    PHP Code:
    <style>
    input#search {
        
    background:url('../images/home-search.gif'no-repeat scroll 0px 0px transparent;
        
    float:right;
        
    position:relative;
        
    border:0 none;
        
    width:120px;
        
    height:55px;
    }
    </
    style><input id="search" type="image" src="images/home-search.gif" value="SUBMIT" alt="submit" /> 

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlaineSch View Post
    Input tags are self ending. You don't use </input>

    Put the background on the actual input element.

    PHP Code:
    <style>
    input#search {
        
    background:url('../images/home-search.gif'no-repeat scroll 0px 0px transparent;
        
    float:right;
        
    position:relative;
        
    border:0 none;
        
    width:120px;
        
    height:55px;
    }
    </
    style><input id="search" type="image" src="images/home-search.gif" value="SUBMIT" alt="submit" /> 
    thanks for responding. I did try that, but it squished the entire image to fit in the space - both states of the image squished into a 55px high area.

    also, I can't seem to get a hover to work that way either - i assume you can't use input:hover as it has no effect. ..? i'm sure this is just my unfamiliarity with forms here, but nothing seems to be working. :/

  4. #4
    SitePoint Member
    Join Date
    May 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can add effects "onfocus" / "onblur" and "onmouseover"/"onmouseout" to the element, which can change the class name, giving you a "hover" effect.

    HTML Code:
    <input type="file" class="out" onmouseover="javascript:this.className='over';" onmouseout="javascript:this.className='out';" />

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BlaineSch View Post
    You can add effects "onfocus" / "onblur" and "onmouseover"/"onmouseout" to the element, which can change the class name, giving you a "hover" effect.

    HTML Code:
    <input type="file" class="out" onmouseover="javascript:this.className='over';" onmouseout="javascript:this.className='out';" />
    thanks. but the main issue is that the sprite is displayed as a whole image squished down to 55px height. can you not use sprites with inputs?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •