Can I make label of select box show options list on focus?

I am want to not show my select box - just have a button that says “color” and when I click it the options list appears - I select and then I am done. The select box is not shown to the user - it would be hidden off screen. Possible?

There would be a problem though in that scripting cannot show the options of a select box. It might be possible to use a hidden multiple-select which is revealed, and then hidden again after a selection is made, but that tends to get trickier.

You start with the elements that you are going to be working with:

<button id="colourbutton">Color</button>
<select multiple="multiple" id="colourchoice">

and a CSS class that will be used to hide certain parts:

.hidden {
    display: none;

and you start with the colour choices being hidden:

document.getElementById('colourchoice').className = 'hidden';

When the button is pressed, you hide the button and show the colour list:

document.getElementById('colourbutton').onclick = function () {
    var button = this,
        colorList = document.getElementById('colourchoice');

    button.className = 'hidden';
    colorList.className = '';

When a colour is chosen, you hide the colour list and show the button again. You can also do something with that selected colour:

document.getElementById('colourchoice').onclick = function () {
    var button = document.getElementById('colourbutton'),
        colorList = this,
        index = this.selectedIndex,
        colour = this.options[index].value;

    button.className = '';
    colorList.className = 'hidden';


Which may be to set the button’s background colour:

function doSomethingWithColour(colour) {
    var button = document.getElementById('colourbutton'); = colour;

Here it is in action -

There are quite a few references between those functions to different elements though, so a tidy up can be to let the button and the select list be able to easily refer to each other.

var button = document.getElementById('colourbutton'),
    list = document.getElementById('colourchoice');

button.list = list;
list.button = button;

Now we can update the functions so that those absolute references can now be removed.

[color="green"]button[/color][s][color="red"]document.getElementById('colourbutton')[/color][/s].onclick = function () {
    var button = this,
        colorList = [color="green"]this.list[/color][s][color="red"]document.getElementById('colourchoice')[/color][/s];

[color="green"]list[/color][s][color="red"]document.getElementById('colourchoice')[/color][/s].onclick = function () {
    var button = [color="green"]this.button[/color][s][color="red"]document.getElementById('colourbutton')[/color][/s],
        colorList = this,
    doSomethingWithColour(colour[color="green"], button[/color]);

function doSomethingWithColour(colour[color="green"], target[/color]) {
    [s][color="red"]var button = document.getElementById('colourbutton');[/color][/s]
    [color="green"]target[/color][s][color="red"]button[/color][/s].style.backgroundColor = colour;

See the update at