Nice 텍스트 영역 만들기

텍스트 영역은 사용자가 입력할 수 있는 웹 페이지의 요소입니다. 일반적으로 주석 영역, 연락처 양식 또는 주소 입력 영역으로 사용됩니다. 모든 브라우저에는 다양한 텍스트 영역의 기본 스타일이 있습니다. 텍스트 영역을 제어하고 다른 요소와 마찬가지로 CSS로 스타일링할 수 있습니다.

textarea#styled {
   width: 600px;
   height: 120px;
   border: 3px solid #cccccc;
   padding: 5px;
   font-family: Tahoma, sans-serif;
   background-image: url(bg.gif);
   background-position: bottom right;
   background-repeat: no-repeat;
}

이 경우 ID가 "스타일링"인 텍스트 영역에는 너비 및 높이 설명 세트, 테두리 및 패딩 적용, 기본 글꼴 세트 및 배경 이미지가 적용됩니다.

텍스트 영역은 또한 여러분이 그들의 미적 행동을 통제하는 데 도움을 주는 몇 가지 다른 특징들도 지원합니다. 즉, "onfocus"와 "onblur"를 인라인으로 적용하고 다음과 같은 javascript 명령을 제공할 수 있습니다.

<textarea name="styled-textarea" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter your comment here...</textarea>

그러면 텍스트 영역의 배경색이 활성 상태일 때는 밝은 녹색으로 변경되고 비활성 상태일 때는 흰색으로 다시 변경됩니다. 다음 간단한 스크립트를 페이지 어딘가에 포함하십시오.*:

function setbg(color)
{
  document.getElementById("styled").style.background=color
}

*.js 파일을 만들어서 헤더에 연결하거나