INPUT 을 다양하게 표현하기
관리자 05-04-23 01:41
 http://5ok.co.kr/born/?doc=bbs/okna.php&bo_table=s_1&page=1&wr_id=37, HIT:32
type='text' 의 테두리를 선으로 표현하기
<input type='text' size=20 name=motifdn
style="border-right: black 1px solid; border-top: black 1px solid;
border-left: black 1px solid; border-bottom: black 1px solid;
font-family: gulim; font-size: 9pt;height:16px;">

type='text' 의 테두리 점선으로 표현하기
<input type='text' name=motifdn size=20
style="border-bottom: 1px dashed; border-left: 1px dashed;
border-right: 1px dashed; border-top: 1px dashed">

type='text' 의 테두리 밑선으로 표현하기
<input type='text' name="motifdn" size=20
style = "border-bottom: #333333 1px solid; border-left: #ffffff 1px solid;
border-right: #ffffff 1px solid; border-top: #ffffff 1px solid">

type='text' 의 배경색 바꾸고 마우스오버시 색바꾸기
<input type="text" name="motifdn" size="20" style="BACKGROUND-COLOR: #999999"
onMouseOver = "this.style.backgroundColor = 'gold'"
onMouseOut  = "this.style.backgroundColor = '#999999'">

type='button' 의 테두리를 선으로 표현하기
<input type=button name="mybn" value="ok"
style="width:50;height:18;background-color:#d0d0d0;border:1 solid #999999;color:silver">

type='button' 에 배경이미지 넣기
<input type=button
style="width:100; height:25; cursor:hand; background:url(이미지파일); color:black;font-weight:bold">

type='button' 에 마우스오버시 색바꾸기
<input type="button" name="mybn" value="ok"
onMouseOver = "this.style.backgroundColor = 'white'"
onMouseOut  = "this.style.backgroundColor = ''">

select의 옵션 전체 배경색 표현하기
<select style='background#b9fd6f;'>
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>

select의 옵션 한줄씩 교대로 배경색 바꿔서 표현하기
<select>
<option value="1" style="background-color: #b9fd6f">선택1</option>
<option value="2">선택2</option>
<option value="3" style="background-color: #b9fd6f">선택3</option>
<option value="4">선택4</option>
<option value="5" style="background-color: #b9fd6f">선택5</option>
</select>

select의 옵션 전부 다른색으로 표현하기
<select style="font-size:8pt">
<option value="1" style="background:navy;color:white">선택1</option>
<option value="2" style="background:yellow;color:black">선택2</option>
<option value="3" style="background:red;color:white">선택3</option>
<option value="4" style="background:navy;color:white">선택4</option>
</select>

textarea 라인선 없이 배경색으로 표현하기
<textarea rows=10 cols=60 style="background-color:#b9fd6f;border-width:0;">내용</textarea>

textarea을 배경이미지으로 표현하기
<textarea style="background-image:url(이미지파일);
background-repeat:no-repeat; background-attachment:fixed;" rows=10 cols=60>내용</textarea>