Magento Forum

   
How to use image as background in select? 
 
muk_t
Sr. Member
 
Total Posts:  222
Joined:  2012-07-24
 

Hi,

I want to use an colored image as background image in html select.How can I do this?

I used the following code

<!DOCTYPE html>
<
html>
  <
head>
      <
style>    
      
select 
      {     
        background
:url('background.jpg'repeat-x 0 0;
        
        
background-color:rgba(0,0,0,0);        
        
padding:4px
        
line-height21px;
        
border1px solid #fff;             
            
        
-webkit-appearancenone;
      
}
    
</style>
  </
head>
  <
body>
    <
select>
      <
option>Foo</option>
      <
option>Bar</option>      
      <
option>Something longer</option>    
    </
select>
  </
body>
</
html>

This works on IE 8,9,Firefox,Opera 12.12
This does not work in IE 7
This partially works in Safari,Chrome If I use -webkit-appearance: none; But appearance is not like Firefox.

Is there any way using which I can be able to use image as background on all browser with same look and feel.

How to use image as background in select in IE 7.

Can I also use the background image for the option

Please help.

Image Attachments
Chrome & Safari View.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
magedziner
Sr. Member
 
Avatar
Total Posts:  246
Joined:  2009-09-02
 
muk_t - 04 January 2013 09:13 PM

Hi,

I want to use an colored image as background image in html select.How can I do this?

I used the following code

<!DOCTYPE html>
<
html>
  <
head>
      <
style>    
      
select 
      {     
        background
:url('background.jpg'repeat-x 0 0;
        
        
background-color:rgba(0,0,0,0);        
        
padding:4px
        
line-height21px;
        
border1px solid #fff;             
            
        
-webkit-appearancenone;
      
}
    
</style>
  </
head>
  <
body>
    <
select>
      <
option>Foo</option>
      <
option>Bar</option>      
      <
option>Something longer</option>    
    </
select>
  </
body>
</
html>

This works on IE 8,9,Firefox,Opera 12.12
This does not work in IE 7
This partially works in Safari,Chrome If I use -webkit-appearance: none; But appearance is not like Firefox.

Is there any way using which I can be able to use image as background on all browser with same look and feel.

How to use image as background in select in IE 7.

Can I also use the background image for the option

Please help.

Maybe you can do it through jquery.
Here is example for it Sample

Hope it helps!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lyonscg
Sr. Member
 
Avatar
Total Posts:  173
Joined:  2009-11-13
Chicago IL
 

I agree with magedziner, jquery is the way to go. I’ve tried doing this sort of thing in the past using CSS and I couldn’t get good support across all browsers.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top