댓글 : WebKit에 고유 한 고유 한 CSS는 텍스트 스타일을 제어 할 수 있습니다. CSS3의 애니메이션 효과와 의사 범주를 사용하면 시스템 로그인, 검색 등에 매우 적합한 애니메이션 입력 상자를 쉽게 만들 수 있습니다. 관심이 있으시면 다음 기사를 참조하거나 도울 수 있습니다.
나는 오랫동안 기술 기사를 쓰지 않았습니다. 나는 최근에 WebKit을 캐리어로 사용하고 있습니다. 물론 HTML5와 CSS3을 대량으로 사용해야하므로 많은 JS를 줄일뿐만 아니라 더 부드럽게 보장합니다.대화 상자를 선택하면 입력 후 프롬프트 텍스트가 더 가벼워지면 사라집니다. 현재 관행은 입력 태그 뒤에 레이블을 추가하는 것입니다. JS 컨트롤을 사용하십시오.
HTML5가 나타나면 더 나은 접근 방식이 있습니다.
<입력 유형 = "텍스트"자리 표시 자 = "사용자 이름 또는 이메일 주소"/>
사용자의 텍스트 프롬프트로 사용할 수있는 자리 표시 자 태그가 있음을 알 수 있습니다. 이것은 매우 편리합니다. 그러나 최상의 완벽을 달성하려면 텍스트를 선택한 후 텍스트를 밝게하거나 프롬프트 파일의 스타일을 수정해야합니다. 우리는 무엇을해야합니까?
입력 ::- WebKit-input-placeholder {
색상 : #999;
-webkit-transition : color.5s;
}
입력 : Focus ::- WebKit-input-Placeholder, 입력 : Hover ::-WebKit-input-Placeholder {
색상 : #C2C2C2;
-webkit-transition : color.5s;
}
-WebKit의 고유 한 CSS 인 Webkit-Input-Placeholder는 내부의 텍스트 스타일을 제어 할 수 있습니다. CSS3의 애니메이션 효과와 의사 클래스를 사용하면 시스템 로그인, 검색 및 기타 위치에 매우 적합한 애니메이션 입력 상자를 쉽게 만들 수 있습니다. 물론이 방법은 IE6과 호환되기 위해 작동하지 않습니다. 그러나 IE9는 자리 표시 자 태그도 지원하지만 색상을 수정할 수는 없습니다.
그렇다면 지원되지 않으면 어떻게해야합니까? jQuery를 사용하여 도움을 줄 수 있으므로이 기사의 범위 내에 있지 않습니다.
데모를 제공하고 데모 주소는 WebKit 브라우저에 있어야합니다. 전체 효과를 확인하십시오. 매우 편리하지 않습니까?