ちょっと加工して，CSSをつけるとこうなります．
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>uranai2</title>
<link rel="stylesheet" type="text/css" href="uranai.css" />
</head>
<body>
利き腕動物占い
<div class="myselect">
<select name="hand_select" onChange="result(this.value)">
<option value="none" selected>利き腕を選んで</option>
<option value="right">右きき</option>
<option value="left">左きき</option>
</select>
</div>
<div class="spacer"><!—-></div>
<div id="type_" class="block"></div>
<script type="text/javascript">
var txt = { //javascriptの配列を作りtxtに入れる
"none":{
0:"利き腕を選んで",
1:"利き腕を選んで",
2:"利き腕を選んで"
},
"right":{
0:"あなたは犬タイプです",
1:"あなたは猫タイプです",
2:"あなたは牛タイプです"
},
"left":{
0:"あなたはタヌキタイプです",
1:"あなたはキジタイプです",
2:"あなたはキリンタイプです"
},
}
function result(myvalue){//上のselectでonChangeで関数を呼びthis.valueに入ったvalue値がmyvalueに入る
var randnum = Math.floor( Math.random() * 3); //０〜２の乱数を発生させよ
var mytxt = "" + txt[myvalue][randnum];//txt配列のmyvalueの乱数値randomで配列の中身を取り出し，ダブルクォーテーションをつけて，mytxtに入れる
document.getElementById("type_").innerHTML = mytxt;
//html内のtype_というIDのついたタグを探し，mytxtの中身を入れなさい
}
</script>
</body>
</html>
CSSはこちら
@charset "UTF-8";
body {
background-color: #f0f8ff;
}
.myselect select {
position: relative;
width: 90%;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #999;
background: #eee;
background: -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
background: linear-gradient(to bottom, #fff 0%,#efebe1 100%);
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
}
.block {
font-size: 1.0em;
color: #fff;
background: #3cb371;
width: 90%;
padding: 10px;
border: 2px dashed rgba(255,255,255,0.5);
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 0 5px #3cb371, 0 2px 3px 5px rgba(0,0,0,0.5);
}
.spacer {
clear: both;
width: auto;
height: 10px;
}
/* CSS Document */
実際の動作はこちら