Solved

background image for option selects

Posted on 2008-06-11
2
752 Views
Last Modified: 2012-05-05
Hello,

I need a background image for my option selects.

My code works in FireFox but not IE
<style>
option {
background: red url(http://www.gosmelltheflowers.com/blog/wp-content/uploads/2007/10/flowers.jpg) no-repeat scroll top left;
}
</style>
 
<select name="showpin[0]" id="showpin_0"  onchange="changePin(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Open in new window

0
Comment
Question by:hankknight
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 
LVL 10

Accepted Solution

by:
bluefezteam earned 500 total points
ID: 21761645
With IE it will not show background images as part of a select form control. There is no workaround.

There is a way if you want to get into javascript, You could write a custom javascript selectbox using floating divs which updated the value of a hidden input field. However, your users could be rather screwed if they don't have scripting enabled (or the necessary scripting support) and you didn't include a decent fallback.

I really don't think going to such lengths is worth the effort at all.
0
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21761702
http://www.templatemonster.com/

This site uses a custom select box to achieve a customised background, you may be able to see how they've achieved it, just click their drop downs
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question