[css] CSS INPUT TYPE
본문
▶ [TYPE="text"]의 테두리를 선으로 표현하기
▶ [TYPE="text"]의 테두리 점선으로 표현하기
▶ [TYPE="text"]의 테두리 밑선으로 표현하기
▶ [TYPE="text"]의 배경색 바꾸고 마우스오버시 색바꾸기
▶ [TYPE="button"]의 테두리를 선으로 표현하기
▶ [TYPE="button"]에 배경이미지 넣기
▶ [TYPE="button"]에 마우스오버시 색바꾸기
▶ select의 옵션 전체 배경색 표현하기
▶ select의 옵션 한줄씩 교대로 배경색 바꿔서 표현하기
▶ select의 옵션 전부 다른색으로 표현하기
▶ TextArea을 라인선 없이 배경색으로 표현하기
▶ TextArea을 배경이미지으로 표현하기
☞ 스타일 속성은 아래와 같습니다.
border(테두리):9px #000000 solid; ----> 두께 색 선종류를 지정합니다.
border-collapse는 테이블 기본속성을 수정할수 있게 하는 속성입니다.
| <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> |
질문자 평  | |
| ☞ 소스에 직접 붙여 넣기로 하는 것이 간편할 듯합니다. 테이블 태그에 style="border:9px #000000 solid; border-collapse:collapse;"를 추가합니다. 예시) <table style="border:9px #000000 solid; border-collapse:collapse;"> |
☞ 스타일 속성은 아래와 같습니다.
border(테두리):9px #000000 solid; ----> 두께 색 선종류를 지정합니다.
border-collapse는 테이블 기본속성을 수정할수 있게 하는 속성입니다.
- separate --> 테이블의 셀 별로 분리해서 속성 설정
- collapse --> 테이블의 셀을 통합해서 설정
그 표현은 다음과 같습니다.
태그 style="border-collapse:collapse | separate;"
[출처] INPUT TYPE CSS|작성자 클라우드
추천0
월드컵님의 댓글
월드컵쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일수고 하셨습니다. ^^