I have built a simple page to generate a combo box and modify its CSS on the fly.
Here is the page:

Combo Box Generator

The problem is, that after you have modified the CSS, if you go back and modify the HTML, it reverts to the start CSS.

Here is my code in a JSFiddle.

HTML Code:
<html>
<head>
<script type="text/javascript">
function writetocell(){
document.getElementById('slider').innerHTML=document.getElementById('words').value;//preview
document.getElementById("wordswidth").value=document.getElementById("buttondiv").offsetWidth;//assign width to form element
}

// Show CSS:

function changeCSS(){
    var cssString = document.getElementById('fullCSS').value;
document.getElementById("dropdown").setAttribute(
   "style", cssString);
}
function writedarkblue(){
document.getElementById("fullCSS").innerHTML = "border: 1px solid #00f; \n font-size: 14px; \n color: #fff; \n background: #33f; \n padding: 5px;";
} 
</script>
<style type="text/css">
.myselect{
   border: 1px solid #00f; 
   font-size: 14px; 
   color: #fff; 
   background: #33f; 
   padding: 5px;
}
.edit {
	background-image:url('edit-this-html.jpg');
	background-position:right bottom;
	background-repeat:no-repeat;
}
.fullCSS{
	background-image:url('edit-this-css.jpg');
	background-position:right bottom;
	background-repeat:no-repeat;
}
div.clearbutton {
	height:50px; 
	width:495px;
	border:1px #999 dashed;
	padding-top:20px;
	padding-left:10px;
}
.cssview {
	height:100px;
	width: 488px;
	border: 1px #999 dotted;
	font-family:arial,sans,verdana;
	font-size:12px;
	padding:10px;
}
.small {
	font-family:arial,sans,verdana;
	font-size:10px;
	color:#999;
}
.px {
            background-image: url(px.jpg);
            background-repeat: no-repeat;
	    background-position: right bottom;
	    width:60px;
}
.hash {
	    padding-left:10px;
            background-image: url(hash.jpg);
            background-repeat: no-repeat;
	    background-position: left bottom;
	    width:50px;
}
</style>
</head>
<body>

            <body onLoad="writetocell()">
          
<span class="small">Preview:</span> 
<div class="clearbutton" id="box1"><span id="slider" style="height:52;"></span> </div> 

<form id="input" method="post" action="buttons/slider.php" target="_blank">
<label><span class="small">HTML:</span></label><br />

<textarea cols="70" rows="15" name="words" id="words" onkeyup="writetocell(); changeCSS();return false" class="edit">
<form>
<select class="myselect" id="dropdown">
  <option value="1">Here is the first option</option>
  <option value="2">The second option</option> 
  <option value="3">And a third option</option>
</select>
</form>
</textarea><span id="selectdemo"></span>
<br />

<!-- <span class="small">CSS:</span> 
<div class="cssview">
<span id="csstest"></span>
</div> -->
    <form>    <span class="small">CSS:</span>  <br />     
    <textarea cols="70" rows="10" id="fullCSS" onKeyUp="changeCSS(); return false" class="fullCSS">
   border: 1px solid #00f; 
   font-size: 14px; 
   color: #fff; 
   background: #33f; 
   padding: 5px;
        </textarea>
    </form>
</body>
</html>