입력 스타일 입력 = "텍스트"에 대해서만 작동

Question

모든 입력을 "텍스트"로 설정하면 아름답게 작동합니다.

예 : 나는 그런 tel 또는 email 같은 추가 HTML5 입력 요소를 가질 때, 내 레이블이 필드에 입력 한 후 다른 필드가 활성화하고보다 떠 거부 https://jsfiddle.net/beckah/62oozn3t/

. 테스트하려면 "이메일"입력을 입력 한 다음 다른 입력과 유형을 선택하십시오.https://jsfiddle.net/beckah/8zpd5n46/1/

어떤 도움을 매우 극명하게 될 것이다 : 당신은 라벨이 한 번 활성화되지

예를 떠 계속하지 않는 것을 볼 수 있습니다. 감사합니다.

Answer 1

의견에서 지적한 것처럼이 문제는 코드 섹션의 CSS에있는 :valid 선택자와 다른 몇 곳에서 발생합니다.

input.question:focus, 
input.question:valid { 
    padding-top: 35px; 
} 

는 텍스트 입력을하는 반면, 오랫동안 비어 있지으로, 다시 붕괴하지 않을 것이다, 붕괴 당신은 :valid 선택기를 사용하고, 어떤 경우에는 이메일 또는 전화는 유효하지 않기 때문에 .

자바 스크립트 작성의 모든 번거 로움을 극복하고 싶다면 일반 텍스트 입력으로 만들 수 있으며 모바일에서 @ 및 .com 키를 사용할 수는 없지만 설계된대로 작동합니다.

완전히 수정하려면 textarea 또는 input에 텍스트가 포함되어 있는지 CSS에서 확인할 방법이 없으므로 input을 JavaScript로 확인해야합니다. 기본적으로 입력의 value이 비어 있지 않은지 확인하고 가능하지 않은 경우 자바 스크립트를 통해 CSS 스타일을 조정하십시오 (getElementById().style.padding = "35px";)

죄송합니다. 간단한 해결책은 없지만 CSS는 있습니다. 이 같은 입력에는 아직 아무 것도 없습니다.