Solved

background image for option selects

Posted on 2008-06-11
2
751 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Find out all repos that a user is most active on Github 1 33
Use "if not" in a condition 2 19
Html using "Or" in condition 3 27
Javascript: Range object 16 14
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

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