I've got a <select> element in which the options are presented as images (specified within the CSS). The <select> and <option> elements render as expected, but setting the default option seems to have no effect.

The first/default option within the select renders as an empty box:

HTML:

<select id="select__avatar" value="avatars-03.png" name="select__avatar">
  <option value="avatars-01.png"></option>
  <option value="avatars-02.png"></option>
  <option value="avatars-03.png" selected="selected"></option>
  <option value="avatars-04.png"></option>
</select>

CSS:

#select__pick_stock_avatar option {
    width: 30px;
    height: 34px;
    background-repeat: no-repeat;
}

#select__pick_stock_avatar option[value="avatars-01.png"]  {    
     background-image:url("../images/avatars-01.png");  
}
#select__pick_stock_avatar option[value="avatars-02.png"]  {    
     background-image:url("../images/avatars-02.png");  
}
#select__pick_stock_avatar option[value="avatars-03.png"]  {    
     background-image:url("../images/avatars-03.png");  
}
#select__pick_stock_avatar option[value="avatars-04.png"]  {    
     background-image:url("../images/avatars-04.png");  
}

The default option renders as a blank. I'd like to be able to set the default option server-side, with the value depending on settings specific to the logged-in user. Is there a way to get the default to show the specified default option/image?