폼요소 스타일 .................................................
폼전송에 사용되는 폼요소를 위한 스타일 지정방법을 간단히 알아봅니다.
폼요소를 구성하는 태그는 <input>,<slelect>,<textarea> 등으로 구성되어 있죠. 이를 재정의하여 사용하는 방법입니다. |
체크박스,라디오 박스는 <input> 태그지만 테두리가 있으면 별로 모양이 좋지 않다. 그래서 사용자정의 box1을 따로 준비했다.
버튼도 <input> 태그지만 입력상자와 따로 정의할 필요가 있다. 그래서 사용자 정의box2를 따로 준비했다.
<textarea> 에는 스크롤바 처리를 위한 스타일을 추가했다.
스크롤바는 따로 정의하지 않았을 때 만약 body태그에 정의되는 스크롤바 스타일이 있다면 이 스타일이 적용된다
<select> 상자의 오른쪽 화살표 부분은 아직 바꿀 수 있는게 없다. |
<style type="text/css">
<!--
input {font-size: 9pt; color:#555555; border:1 solid #cccccc; background-color:#ededed}
select {font-size: 9pt; color:#555555; border:1 solid #cccccc; background-color:#ededed}
select {font-size: 9pt; color:#555555; border:1 solid #cccccc; background-color:#ededed ;
scrollbar-face-color: #cccccc;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ededed;
scrollbar-highlight-color: #ededed;
scrollbar-shadow-color: #ededed;
scrollbar-darkshadow-color: #ededed;
scrollbar-3dlight-color: #ededed; }
.box1 {font-size: 9pt; color:#555555; border:0; background-color:#ffffff}
.box2 {font-size: 9pt; color:#555555; border:1 solid #ededed; background-color:#ededed}
-->
</style> | |
|
|
|
오렌지
