input type='text'표현방법
▶ [TYPE="text"]의 테두리를 선으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="text" maxlength="8" 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;">
</body>
</html>
▶ [TYPE="text"]의 테두리 점선으로 표현하기 <html>
<head>
<title>..</title>
</head>
<body>
<input type="text" maxlength="30" name="motifdn" size="20"
style="BORDER-BOTTOM: 1px dashed; BORDER-LEFT: 1px dashed;
BORDER-RIGHT: 1px dashed; BORDER-TOP: 1px dashed">
</body>
</html>
▶ [TYPE="text"]의 테두리 밑선으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<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">
</body>
</html>
▶ [TYPE="text"]의 배경색 바꾸고 마우스오버시 색바꾸기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="text" name="motifdn" size="20" style="BACKGROUND-COLOR: #999999"
onMouseOver = "this.style.backgroundColor = `gold`"
onMouseOut = "this.style.backgroundColor = `#999999`">
</body>
</html>
▶ [TYPE="button"]의 테두리를 선으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="button" name="mybn" value="ok"
style="width:50;height:18;background-color:#d0d0d0;border:1 solid #999999;color:silver">
</body>
</html>
▶ [TYPE="button"]에 배경이미지 넣기 <html>
<head>
<title>..</title>
</head>
<body>
<input type="button"
STYLE="width:100; height:25; cursor:hand; background:url(이미지파일); color:black;font-weight:bold">
</body>
</html>
▶ [TYPE="button"]에 마우스오버시 색바꾸기 <html>
<head>
<title>..</title>
</head>
<body>
<input type="button" name="mybn" value="ok"
onMouseOver = "this.style.backgroundColor = `white`"
onMouseOut = "this.style.backgroundColor = ``">
</body>
</html>
▶ select의 옵션 전체 배경색 표현하기 <html>
<head>
<title>..</title>
</head>
<body>
<select style="background#B9FD6F;>
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>
</body>
</html>
▶ select의 옵션 한줄씩 교대로 배경색 바꿔서 표현하기 <html>
<head>
<title>..</title>
</head>
<body>
<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>
</body>
</html>
▶ select의 옵션 전부 다른색으로 표현하기 <html>
<head>
<title>..</title>
</head>
<body>
<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>
</body>
</html>
▶ TextArea을 라인선 없이 배경색으로 표현하기 <html>
<head>
<title>..</title>
</head>
<body>
<TEXTAREA rows=10 cols=60 style="background-color:#B9FD6F;border-width:0;" >
내용</TEXTAREA>
</body>
</html>
▶ TextArea을 배경이미지으로 표현하기 <html>
<head>
<title>..</title>
</head>
<body>
<TEXTAREA style="background-image:url(이미지파일);
background-repeat:no-repeat; background-attachment:fixed;" rows=10 cols=60>
내용</TEXTAREA>
</body>
</html>
'WebPrograming관련' 카테고리의 다른 글
| 구글 모바일 검색 시장을 겨냥한 무서운 준비 과정 (0) | 2007.05.05 |
|---|---|
| [tip]input버튼 스타일 시트를 적용해서 이쁘게 해봐요~ (0) | 2007.05.02 |
| input (0) | 2007.05.02 |
