HTML5의 입력 요소에 대한 콘텐츠 표시 후 ::이 되지 않는 이유는 무엇입니까?

입력 필드용 CSS 의사 요소

HTML5에서 CSS 의사 요소를 사용하여 양식 입력에 시각적 단서를 추가하면 사용자 경험을 향상시킬 수 있습니다. 다음 예에서 볼 수 있듯이 스타일링을 위해 ::before 및 ::after 의사 요소를 사용하려고 시도할 수 있습니다.

<code class="css">input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }</code>

그러나 입력 요소에 대한 ::after 콘텐츠를 표시하는 데 어려움이 발생할 수 있습니다. . 단일 콜론과 이중 콜론을 모두 사용하고 의사 클래스를 제거하고 다른 브라우저로 실험해도 콘텐츠는 보이지 않습니다.

::after 의사 요소는 div,span,p 및 같은 요소에서 원활하게 작동합니다. q, 입력 요소의 경우에는 해당되지 않습니다. 이 동작은 이러한 요소의 기본 속성에서 비롯됩니다. 즉, 문서 트리 콘텐츠가 부족합니다.

요소 콘텐츠의 역할

CSS 사양에 따르면(http:// www.w3.org/TR/CSS21/generate.html), ::after 의사 요소는 콘텐츠를 렌더링하기 위해 문서 트리 콘텐츠가 있는 요소를 명시적으로 요구합니다. img 및 br과 유사한 입력 요소에는 그러한 콘텐츠가 포함되어 있지 않습니다. 따라서 브라우저는 입력 필드의 내용 뒤에 ::를 표시하지 않도록 설계되었습니다.

위 내용은 HTML5의 입력 요소에 대한 콘텐츠 표시 후 ::이 되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!