Hide selected value in <select> element?

Question

I want to have a select drop down but it would only show the arrow.

So everything works the same way but the selected/current value will not be shown. The only thing you can click is the small drop down arrow button.

Is this possible in jquery/css?

So the selected option isn't shown... but when you click on the arrow it is shown(along with all the other possible values)... correct? — Philip Kirkbride
– Philip Kirkbride, Commented Aug 2, 2012 at 16:21
So you want something like |v| and not |______|v| ? If you can tell what I'm trying to draw. — Luke
– Luke, Commented Aug 2, 2012 at 16:22
yes @PhilipK. And it will be shown else where so I don't wanna display it twice. — Dragonfly
– Dragonfly, Commented Aug 2, 2012 at 16:22
yes @Luke . I just want the arrow and just wondering if its possible. Or I'll just write my own drop down function using Jquery if its not possible — Dragonfly
– Dragonfly, Commented Aug 2, 2012 at 16:23

Eugene H · Accepted Answer · 2012-08-02 17:50:04Z

HTML:

 <select id="selectshowarrowonly"> <option value="1">Sample String 1</option> <option value="2">Sample String 2</option> </select>

CSS:

 #selectshowarrowonly{width:15px;}

I've made a fiddle at: http://jsfiddle.net/M8Zmc/

If you are particular about making this cross-browser friendly, you can use your own image for the arrow and fix the width & height:

CSS:

 #selectshowarrowonly{ width:50px; height:50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("http://cdn1.iconfinder.com/data/icons/oxygen/48x48/actions/arrow-down.png") no-repeat; }

HTML:

 <select id="selectshowarrowonly"> <option value="1"></option> <option value="2">Sample String 1</option> <option value="3">Sample String 2</option> </select>

Again the fiddle is at: http://jsfiddle.net/M8Zmc/3/

This will most likely not work across browsers. Each browser will render the arrow at different sizes. So sometimes you will see some of the arrow or too much and catch some of the options text.
Agreed. I've added another method for cross-browser friendlyness

Luke · Accepted Answer · 2012-08-02 16:28:36Z

I don't know of a way to do this with javascript, but I think you could make you're own pretty easily. If you make an image of a down arrow, when you click it, it could show all the options for the select right underneath. This would be almost exactly the same as creating a drop down menu for a navigation bar. If you'd like to take this approach you could look at this generator for a drop down menu: http://purecssmenu.com/ or of course code your own.

Cheers!

Collectives™ on Stack Overflow

Hide selected value in <select> element?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related