일부 필드의 필요성이 다른 필드의 값에 따라 달라 지므로 동적으로 변경되는 HTML 양식을 작성 중입니다. 필자는 각 필수 필드 앞의 레이블에 별표를 추가하여 해당 요구 사항에 대한 시각적 큐를 제시하고자합니다. 순전히 시각적이며 상황의 의미가 적절한 태그의 required 속성으로 잘 표현 되었기 때문에 HTML에서 직접 또는 스크립트를 통해 삽입하는 대신 CSS 정의의 내용으로 별표를 추가하고 싶습니다. CSS 선택기 콤비가 (자녀와 다음 형제 자매쪽으로) 앞으로 갈 수 있지만 뒤로 (부모 또는 이전 형제를 향한)하는 것 때문에화면 판독기가 디스플레이 플렉스를 어떻게 처리합니까?
그러나, 필수 필드 위의 요소 시각적 콘텐츠를 추가하는 것은 도전이다.
물론 내가 입력 필드의 필요성을 변경하는 것과 동일한 코드에서 레이블의 클래스 이름을 전환 할 수는 있지만, 콘텐츠 변경 사항을 필수 변경 사항과 분리하여 두 가지 다른 지시 사항을 기억해야합니다 이제부터 지금까지 1 년 동안 함께 전화하기 때문에 나는 피하려고하는 제약이 있습니다. 필자는 입력 필드의 필요성을 토글하는 것을 선호하고 CSS가 내 부분에 더 이상 개입하지 않고 그 변화에 반응하도록합니다.
그래서 각 레이블과 그 입력 필드의 순서를 뒤집은 다음 display:flex; flex-direction:column-reverse 요소에 둘 다 줄 바꿈하여 레이블 텍스트가 그 뒤에 선언 되더라도 해당 필드 앞에 렌더링되게했습니다. 그런 식으로, 나는 각 필수 필드의 레이블 텍스트에 별표를 추가하려면 다음 - 형제 연결자를 사용할 수 있습니다
label {
display:inline-flex;
flex-direction:column-reverse;
}
label>input[required]+span:after
{
content:"*";
color:#a21;
}<label>
<input type="text" required>
<span>Field 1</span>
</label>
<label>
<input type="text">
<span>Field 2</span>
</label>내 질문에, 그러나, 독자가 이중 것으로 해석 화면 방법입니다 inversion (한 번은 HTML에서, 한 번은 CSS에서). 그들은 사용자 입력을 기대하기 전에 텍스트를 읽을 것입니까? '
덕분에, 난 항상 앉아 화면 판독기를 설치하고 혼자서이 일을 찾을 필요가 있지만 일반적으로 돈