enhanced multiselect

by sanford

HTML

<label for="s0">select</label>
<div class="selectwrapper">
    <select multiple="yes" size="3" class="mine" id="s0"> 
    <option id="s0i0" class="mine fireselected" selected="selected">optione 1</option> 
    <option id="s0i1" class="mine">optio e 2</option> 
    <option id="s0i2" class="mine" selected="selected">optione 3</option> 
</select></div>

CSS

select.mine {
        border-color: gray;
        border-style: dotted;
        border-width: 0;
    background-image: url(http://www.imprimia.com/option_off.png)
        ,url(http://www.imprimia.com/option_off.png?1)
        ,url(http://www.imprimia.com/option_off.png?12)
        ,url(http://www.imprimia.com/option_off.png?13);
    background-position: 0 0
        ,0 16px
        ,0 32px
        ,0 48px;
    background-repeat:  no-repeat;
    background-color: lightgray;
    font-size: 12px;
    padding:0;
    margin:0;
    padding-right: 16px;
    padding-left: 16px;
    outline: none !important;
    position:absolute;
    width: 200px;
    height: 48px;
    clip:rect(0px 185px 300px 0px);
}
 
option.mine {
    background-color: beige;
    height:16px;
    /* border-radius: 5px; */
    /* padding: 2px 2px 2px 4px; */ /* moz only -- to clear radius */
    cursor:pointer;
    
    
}
 
option.mine[disabled] {
    background-color: transparent;
    cursor: default;
    /* margin-bottom: -7px; */ /* moz only, tighter */
}


.selectwrapper {
    padding: 10px;
    background-color: lightgray;
    width: 184px;
    height: 300px;
    border-radius: 7px;

}

label:hover + * { border: 2px dotted blue;}

JavaScript

(getShifty = function() {
    var shifty = '';
    this.getChildren().each(function(itm,idx) {
        if ( idx > 0 ) shifty += ',';
        shifty += itm.selected == true
            ? '-16px'
            : '0';
        shifty += ' ' + (idx * 16) + 'px';        
    });
    this.setStyle('background-position',shifty);
}).call($$('select.mine')[0]);

//debugger;
$$('select.mine').addEvents({
    'click' : getShifty
    ,'keyup' : getShifty
});