Quest'esempio si limita a fare quello che cerchi. Se vuoi renderlo più cool devi lavorare sul CSS.
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<style type="text/css">
fieldset.e-list {
position: relative;
height: 24px;
width: 250px;
display: inline-block;
vertical-align: middle;
overflow: visible;
padding: 0;
margin: 0;
border: none;
}
fieldset.e-list label, fieldset.e-list input[type="text"], fieldset.e-list legend {
width: 90%;
height: 24px;
margin: 0;
padding: 0 8px;
line-height: 24px;
font-family: verdana;
font-weight: normal;
font-size: 12px;
border: 1px #cccccc solid;
background-color: #ffffff;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
fieldset.e-list:hover label, fieldset.e-list:hover input[type="text"] {
border: none;
}
fieldset.e-list label:hover, fieldset.e-list input[type="text"]:hover {
background-color: red !important;
}
#tizio:checked + label, fieldset.e-list input[type="radio"], fieldset.e-list input[type="text"], fieldset.e-list label, fieldset.e-list legend {
display: none;
}
fieldset.e-list:hover label, fieldset.e-list input[type="radio"]:checked + label, #tizio:checked ~ input[type="text"], fieldset.e-list:hover legend {
display: block;
}
fieldset.e-list:hover input[type="radio"]:checked + label, fieldset.e-list:hover input[type="radio"]:checked ~ input[type="text"] {
background-color: blue;
}
</style>
</head>
<body>
<form name="tuo-form">
<div>Metti il mouse sopra questo campo:
<fieldset class="e-list">
<legend>- scegli -</legend>
<input type="radio" name="selezione" value="0" id="tizio" /><label for="tizio">Scegli...</label><input type="text" name="campotesto" value="0" />
<input type="radio" name="selezione" checked value="1" id="caio" /><label for="caio">Gianni</label>
<input type="radio" name="selezione" value="2" id="sempronio" /><label for="sempronio">Pinotto</label>
</fieldset>
</div>
<p>Esempio di textbox normale: <input type="text" name="testosemplice" /></p>
<p>
Esempio di select normale:
<select name="selectsemplice">
<option>Mario</option>
<option>Luigi</option>
<option>Dumbo</option>
</select>
</p>
<p>
Esempio di textarea normale:<br />
<textarea name="areaditesto" cols="50" rows="10"></textarea>
</p>
</form>
</body>
</html>