Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

remove the arrow on a dropdown list

Posted on 2010-11-17
10
Medium Priority
?
2,311 Views
Last Modified: 2012-05-10
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
Comment
Question by:cycledude
[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
10 Comments
 
LVL 4

Expert Comment

by:claracruz
ID: 34155313
Doubtful in CSS only., this I have never seen...

But using JavaScript you can, now that, I have seen done
1
 
LVL 9

Expert Comment

by:TonyReba
ID: 34155387
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
 

Author Comment

by:cycledude
ID: 34155524
@claracruz

If you could supply some more details that would be great!
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 4

Accepted Solution

by:
claracruz earned 2000 total points
ID: 34157119
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
 
LVL 4

Expert Comment

by:claracruz
ID: 34157367
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
 

Author Comment

by:cycledude
ID: 34158794
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
 
LVL 4

Expert Comment

by:claracruz
ID: 34160032
Yeah.. there's is no provision to my knowledge that would facilitate that I'm afraid. I'm fairly certain it not possible.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34160486
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
 

Author Comment

by:cycledude
ID: 34162376
@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
 

Author Comment

by:cycledude
ID: 34171130
hmm... it seems that only firefox show the background image!
0

Featured Post

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

609 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