How do I setting several font styles for select options?

I have a select form element with options to chose a font style for displayed text. What I'm trying to do is use CSS to show what the font looks like in the drop down list as shown below. It's not working. I'm also not able to format any spacing (margin or padding) for the options in the pull down.

Is it possible to do in CSS?

 <select name="choose_font" id="change_font">
        <option class="show_verdana" selected>Verdana</option>
        <option class="show_georgia">Georgia</option>
        <option class="show_courier">Courier</option>
    </select>

HTML:

and the CSS

#change_font option {
 margin: 5px 0;                  /*  Giving some space between options doesn't work, i tried padding as well */
 color: blue:                      /*  Setting color works */
 }


/* None of this works */
.show_verdana { font-family: "Verdana" color:green;}
.show_georgia { font-family: "Georgia"}
.show_courier { font-family: "Courier New"}
.show_arial { font-family: "Arial"}

HTML:

Thanks

 

I would check out this page:

www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-option/