• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2337
  • Last Modified:

remove the arrow on a dropdown list

Hi Experts

I would like to dispay a background image in place of a dropdown list, it kind of works but ...

I set the background image for the dropdown and removed the border from the dropdown list, . just need to get rid of the ugly dropdown arrow, can this be done in css?
0
cycledude
Asked:
cycledude
1 Solution
 
claracruzCommented:
Doubtful in CSS only., this I have never seen...

But using JavaScript you can, now that, I have seen done
1
 
TonyRebaCommented:
The only way I can think of is using using  ajax  and a simple textbox , not a dropdown control.. see this samples , hope it helps

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/

0
 
cycledudeAuthor Commented:
@claracruz

If you could supply some more details that would be great!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
claracruzCommented:
Well essentially, what you need to do is this;

1. you would have to check for select dropdown controls on page load and hide them.

2. Then create a span in its place. Then style the span to look like what you wanted with your dropdown.

3. Then create div with given dimensions to house the dropdown list options

4 Then when an option is selected in the div, you set the value to the span


If is worth the trouble, the results can be awesome.

It is done to outstanding results here;-

http://www.nuon.com/info_center/result.jsp?xslLocation=tcm%3A185-58710&actionUrl=%2Finfo_center%2Fresult.jsp&startPageUrl=%2Finfo_center%2Findex.jsp&infocentre=tcm%3A185-58892&searchString=Search&submit=Zoeken
0
 
claracruzCommented:
And you can take it one step further and customize the div scrollbars if u wanted...

see here-

http://13thparallel.com/archive/dhtml-scrollbars/example.htm tutorial (http://13thparallel.com/archive/dhtml-scrollbars/)
0
 
cycledudeAuthor Commented:
Hi Claracruz

Thanks for the links... very good.   Really all I want to do is hide the dropdown arrow, the background image has the right look and the functionality is there with the dropdown, I just have this horrid blue rectangle with a down arrow over the top of my image... eek!
0
 
claracruzCommented:
Yeah.. there's is no provision to my knowledge that would facilitate that I'm afraid. I'm fairly certain it not possible.
0
 
scrathcyboyCommented:
A drop-down list REQUIRES the down arrow.  If you remove it, how is anyone going to know it is a drop down list?  And to see the drop down list, they click on the arrow?  So no, it can't be removed because it tells the user that this is a drop down list !!
0
 
cycledudeAuthor Commented:
@scrathcyboy

I know that a dropdown needs an arrow, my background image has it there, I just dont want the default arrow showing over the top.

If this can't be done then I will have to go down the jQuery route, but it's frustrating that we can't just set the arrow to display: none; or something
0
 
cycledudeAuthor Commented:
hmm... it seems that only firefox show the background image!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now