다른 요소 앞에 오는 요소를 선택하기위한 CSS 선택기?
이 질문에 이미 답변이 있습니다.
- "이전 형제"선택기가 있습니까? 15 답변
내 웹 사이트의 로그인 페이지에서 작업 중이며 텍스트 상자에 포커스가있을 때 입력 상자 앞에 오는 레이블을 굵게 표시하고 싶습니다 . 지금은 다음과 같은 마크 업이 있습니다.
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
인접한 선택기를 사용하여 텍스트 상자 뒤 의 레이블을 선택할 수 있지만 그 앞의 요소는 선택할 수 없습니다. 이 CSS 선택기 규칙을 사용할 수 있지만 이후에만 레이블을 선택하므로 사용자 이름 텍스트 상자에 초점이 맞춰지면 암호 레이블이 굵게 표시됩니다.
input:focus + label {font-weight: bold}
이 작업을 수행하기 위해 할 수있는 일이 있습니까? 이 작업을 쉽게 수행하는 데 JavaScript를 사용할 수 있다는 것을 알고 있지만 가능하면 순수 CSS 기반 솔루션을 사용하고 싶습니다. 방법을 찾을 수 없습니다.
.NET Framework input이전에있는 경우 '인접 형제 선택자'를 사용할 수 있습니다 label. 그냥 넣어 input전과 label후 넣어 레이아웃 수정 label전과를 input. 예를 들면 다음과 같습니다.
<head runat="server">
<title></title>
<style type="text/css">
input:focus + label {font-weight: bold}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
</body>
(이것은 일종의 해킹입니다. 개인적으로 자바 스크립트를 사용 하여이 작업을 수행합니다)
input:focus + label {font-weight: bold}<form id="form1" runat="server">
<div style="direction:rtl">
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div style="direction:rtl">
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>CSS 선택기 4 제원 을 사용하여 셀렉터의 "제목"를 정의하는 신택스를 제공한다 !. 2016 년 초부터는 어떤 브라우저에서도 사용할 수 없습니다. 브라우저가이 구문을 구현하면 순수 CSS를 사용하여이 작업을 수행하는 올바른 방법이 될 것이기 때문에 이것을 포함했습니다.
질문의 마크 업이 주어지면
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
이 CSS는 트릭을 할 것입니다.
label:has(+ input:focus) {font-weight: bold}
물론 이것은 브라우저가 실제로 주제 선택기를 구현하고이 구문이 :focus의사 클래스 에서 작동하는 방식과 관련된 버그가 없다고 가정합니다 .
CSS를 사용하여 이전 요소를 제공하는 선택기가 없습니다 ..
당신이 원하는 것을 처리하려면 자바 스크립트를 사용해야합니다.
이 선택기를 사용하십시오.
label[for=username]
{
font-weight: bold
}
'for'속성에 'username'값이있는 라벨이 선택됩니다.
Floating the input element to the right, achieves correct element order without changing order of "Username" and ":" in the label text that you get with direction:rtl.
<style type="text/css">
form {text-align: right;}
input:focus + label {font-weight: bold}
input {float:right; clear:right;}
</style>
<form>
<div>
<input type="text" id="username" />
<label for="username">Username:</label>
</div>
<div>
<input type="password" id="password" />
<label for="password">Password:</label>
</div>
</form>
'programing tip' 카테고리의 다른 글
| ES6 템플릿 리터럴이 문자열 연결보다 빠릅니까? (0) | 2020.11.21 |
|---|---|
| Tensorflow에서 Poolallocator 메시지를 해석하는 방법은 무엇입니까? (0) | 2020.11.21 |
| URL을 열려면 운영 체제를 호출 하시겠습니까? (0) | 2020.11.20 |
| event.target을 사용하여 요소 상위 요소를 타겟팅 할 수 있습니까? (0) | 2020.11.20 |
| WPF ListView 비활성 선택 색상 (0) | 2020.11.20 |