HTML5는 CSS3와 협력하여 프롬프트 텍스트가 포함된 입력 상자를 구현합니다(js 제거)_html5 튜토리얼 기술

오랫동안 기술적인 글을 쓰지 않았습니다. 최근에는 Webkit을 캐리어로 사용하여 시스템을 개발하고 있습니다. 물론 Html5와 CSS3을 많이 사용해야 하는데, 이로 인해 JS가 많이 줄어들 뿐만 아니라 보다 원활한 개발을 보장합니다.

대화 상자를 선택하면 입력 후 프롬프트 텍스트가 더 밝아지고 사라집니다. 이제 일반적인 방법은 입력 레이블 뒤에 레이블을 추가하는 것입니다. JS 컨트롤을 사용하십시오.
HTML5가 나온 후에는 더 나은 방법이 있습니다.

코드 복사

코드는 다음과 같습니다.

사용자 텍스트 프롬프트로 사용할 수 있는 자리 표시자 태그가 있는 것을 볼 수 있습니다. 이것은 매우 편리합니다. 하지만 가장 완벽하게 하려면 텍스트를 더 밝게 만들거나 프롬프트 파일을 선택한 후 스타일을 수정해야 합니다.

코드 복사

코드는 다음과 같습니다.

input::-webkit- 입력 자리 표시자 {
색상: #999;
-webkit-전환:
}
입력:초점::-webkit-input-자리 표시자, 입력:hover::-webkit -input- 자리 표시자 {
color:
-webkit-transition: color.5s;

-webkit-input-placeholder, 웹킷 고유의 CSS CSS3의 애니메이션 효과 및 의사 클래스와 결합된 내부 텍스트 스타일을 사용하면 시스템 로그인, 검색 등에 매우 적합한 애니메이션 입력 상자를 쉽게 만들 수 있습니다. 물론 IE6과 호환되기를 원한다면 이 방법은 작동하지 않습니다. 그러나 Ie9는 자리 표시자 태그도 지원하지만 색상을 수정할 수는 없습니다.
그럼 지원되지 않는다면 어떻게 해야 하나요? Jquery를 직접 사용하여 도움을 받을 수 있으므로 이 기사의 범위를 벗어납니다.
데모 주세요,
데모 주소 전체 효과를 보려면 Webkit 브라우저를 사용해야 합니다. 매우 편리하지 않습니까?