h5 및 CSS3은 프롬프트 텍스트가 있는 입력 상자를 만듭니다.

WebKit에는 내부에 텍스트 스타일을 제어할 수 있는 고유한 CSS가 있습니다. CSS3의 애니메이션 효과와 의사 클래스를 사용하면 시스템 로그인, 검색 등에 매우 적합한 애니메이션 입력 상자를 쉽게 만들 수 있습니다. 관심이 있으시면 이 기사를 참조하시면 도움이 될 것입니다. 오랫동안 기술적인 글을 쓰지 않았습니다. 최근에는 Webkit을 캐리어로 사용하여 시스템을 개발하고 있습니다. 물론 Html5와 CSS3을 많이 사용해야 하는데, 이로 인해 JS가 많이 줄어들 뿐만 아니라 보다 원활한 개발을 보장합니다.

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

코드는 다음과 같습니다.

<input type="text" placeholder="用户名或邮件地址" name="username"/>

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

코드는 다음과 같습니다.

input::-webkit-input-placeholder { 
color: #999; 
-webkit-transition: color.5s; 
} 
input:focus::-webkit-input-placeholder, 
input:hover::-webkit-input-placeholder { 
color: #c2c2c2; 
-webkit-transition: color.5s; 
}

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

【관련 권장사항】

1. CSS3 무료 동영상 튜토리얼

일반적으로 사용되는 최신 CSS3 속성 공유

3. CSS를 사용하여 채팅 상자에 작은 모서리와 거품 효과 만들기

4. 브라우저는 고성능 CSS3 애니메이션을 구현합니다. 모바일측

5.

이미지 플라이인 및 페이드인 효과를 구현하는 h5+css3 코드 예시

위 내용은 h5 및 CSS3은 프롬프트 텍스트가 있는 입력 상자를 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!