input box 스타일 설정 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

글자색 바꾸기
<input type="text" style="color:#ea0000;"  value="해피정닷컴" disabled="disabled" />
 
배경색과 테두리색 바꾸기
<input type="text" style="background-color:#fff7f7; border:1px solid #ea0000;" value="해피정" />
 
테두리 안보이도록 바꾸기
<input type="text" style="border:0px; background-color:transparent;" value="해피정닷컴" />
 

Input Box 속성

  readonly - value값을 수정할 수 없다. 
  disabled="disabled" - input box를 비활성화 시킨다.   form 전송시 값이 전달되지 않는다
  style
     border:0px; - 외곽선 속성을 0으로 셋팅
     width= ;    - 가로 넓이
     height= ;   - 세로 길기
     background-color: ; - 배경색 속성
     color: ;            -   글자색 속성
     background-image:url('이미지 경로/이미지 파일명');    - 텍스트 상자안에 이미지 삽입
     background-position:0px 0px;    - 이미지 표시 위치
     text-align:center;  - 텍스트 정렬
     ime-mode:active     - 한글 기본, 한/영변환 자유로움
              inactive   - 영문기본, 한/영변환 자유로움
              auto       - 한글/영문 중 선택된 mode
              disabled   - 영문기본, 영문/숫자만 입력가능
     font-family:돋움;
     font-size:12px;
     border-style:solid;
     border-bottom: #B5B6B5 1px solid;
     border-left: #B5B6B5 1px solid;
     border-right: #B5B6B5 1px solid;
     border-top: #B5B6B5 1px solid; 
     padding-right:3px;
     padding-top:2px;
 
 
참고자료
http://joke00.tistory.com/42
http://blog.daum.net/queenyjina/7004603
http://www.orangeday.co.kr/blog/entry/input-box-스타일-설정