50/50 Custom dropdowns

HTML

<select>
    <option>Lorem 1</option>
    <option>Lorem 2</option>
    <option>Lorem 3</option>
    <option>Lorem 4</option>
</select>

<select>
    <option>Lorem 1</option>
    <option>Lorem 2</option>
    <option>Lorem 3</option>
    <option>Lorem 4</option>
</select>

CSS

.selectWidget {
    position: relative;
    margin: 10px;
}

.selectWidget span,
.selectWidget select {
    width: 200px;
    display: block;
    padding: 4px;
    font-size: 12px;
    font-family: Helvetica;
    line-height: 16px;
    border: none;
}

.selectWidget span {
    color: #fff;
    background: #84508C;
    -moz-border-radius: 4px;
    border-radius:4px;
}


.selectWidget select{
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript

var Widget = new Class({
    
    Implements: [Options, Events],
    
    options: {},
    
    initialize: function(){
        console.log('initialize Widget');
    }
    
});

Widget.Select = new Class({
    
    Implements: [Options, Events],
    
    options: {},
    
    initialize: function(widgets){
        this.widgets = widgets;
        
        this.label = [];
        
        this.checkWidgets();
    },
    
    checkWidgets: function(){
        this.widgets.each(this.prepare, this);
    },
    
    prepare: function(widget, index){
        this.label[index] = new Element('span', {
            'text': widget.getSelected().get('text')
        });
        
        new Element('div', {
            'class': 'selectWidget'
        }).wraps(widget).adopt(this.label[index]);
        
        this.attachListener(widget, index);
    },
    
    attachListener: function(widget, index){
        widget.addEvents({
            change: function(){
                this.label[index].set('text', widget.getSelected().get('html'));
            }.bind(this)
        });
    },
    
    update: function(widget, optionIndex){
        widget.options[optionIndex].selected = true;
        widget.fireEvent('change');
    }
    
});

var Select = new Widget.Select($$('select'));

Select.update($$('select')[0], 2);