Trio 홈페이지 레디오 단추 스타일 예제 예제 메뉴로

Javascript + CSS

aaa bbb ccc
aaa bbb ccc
aaa bbb ccc
aaa bbb ccc
aaa bbb ccc


본문의 화일 내용
<head>
..
<style>
input.a {background-color:blue; margin:2pt; 
  width:80pt; height:60pt; vertical-align:middle; text-align:center}
input.a1 {background-color:green; margin:2pt; 
  width:40pt; height:20pt; vertical-align:middle; text-align:center}
input.b {background-color:green; margin:2pt; 
  width:15pt; height:15pt; vertical-align:middle; text-align:center}
input.c {background-color:cc8; margin:2pt; 
  width:20pt; height:30pt; vertical-align:middle; text-align:center}
input.d {background-color:8cc; margin:1em;
  width:16pt; height:8pt; vertical-align:middle; text-align:center}
radio checked {color:red}
</style>
</head>

<body>
..
<table border=0>
<tr align=center valign=middle>
<td>
<form style="color:green; border:solid 1pt red; width:12em;
  text-align:center; background-color:eff; padding:.5em" method="get">
<input type=radio name="a" value="aaa" class=a
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="blue"'> aaa</input>
<input type=radio name="a" value="bbb" class=a checked
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="blue"'> bbb</input>
<input type=radio name="a" value="ccc" class=a
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="blue"'> ccc</input>
</form>
</td>
<td>
<form style="color:green; border:solid 1pt red; width:6em; text-align:center;
  background-color:eff; padding:.5em" method="get">
<input type=radio name="a1" value="aaa" class=a1
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="green"'> aaa</input>
<input type=radio name="a1" value="bbb" class=a1 checked
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="green"'> bbb</input>
<input type=radio name="a1" value="ccc" class=a1
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="green"'> ccc</input>
</form>
</td>
<td>
<form style="color:green; border:solid 1pt red; width:6em; text-align:center;
  background-color:eff; padding:.5em" method="get">
<input type=radio name="b" value="aaa" class=b
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="green"'> aaa</input>
<input type=radio name="b" value="bbb" class=b checked
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="green"'> bbb</input>
<input type=radio name="b" value="ccc" class=b
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="green"'> ccc</input>
</form>
</td>
</tr>
<tr align=center valign=middle>
<td>
<form style="color:blue; border:solid 1pt blue; width:18em;
  text-align:center; background-color:fee">
<input type=radio name=c class=c checked
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="cc8"'> aaa</input>
<input type=radio name=c class=c
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="cc8"'> bbb</input>
<input type=radio name=c class=c
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="cc8"'> ccc</input>
</form>
</td>
<td colspan=2>
<form style="color:blue; border:solid 1pt blue; width:18em;
  text-align:center; background-color:fee">
<input type=radio name=c class=d checked
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="8cc"'> aaa</input>
<input type=radio name=c class=d
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="8cc"'> bbb</input>
<input type=radio name=c class=d
  onmouseover='this.style.backgroundColor="red"'
  onmouseout='this.style.backgroundColor="8cc"'> ccc</input>
</form>
</td>
</tr>
</table>
..
</body>
</html>

번역문 소유자 - Trio 홈페이지 제공 이 문서(http://trio.co.kr/webrefer/csex/radiostyle.html)는
자유로이 연결 사용이 가능함.
예제 메뉴로