CSS Selector для выбора элемента, который приходит перед другим элементом?

Я работаю над страницей входа для своего веб-сайта, и я хочу смело выделить ярлык, который приходит до, когда поле ввода получает фокус. Сейчас у меня есть следующая разметка:

<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-решение, если это возможно, я просто не могу понять, как это сделать.

Ответы

Ответ 1

Можно было бы использовать "соседний селектор", если 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>

(Это своего рода хак, я лично использовал бы javascript для этого)

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>

Ответ 2

CSS Selectors 4 Spec предоставляет синтаксис для определения "субъекта" селектора с помощью !. По состоянию на начало 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.

Ответ 3

Нет селектора, который предоставит вам предыдущий элемент с помощью CSS..

Вам нужно будет использовать javascript для обработки того, что вам нужно.

Ответ 4

Используйте этот селектор:

label[for=username]
{
font-weight: bold
}

это выберет метку, которая имеет значение "имя пользователя" в атрибуте "для"

Ответ 5

Плавающий входной элемент вправо, обеспечивает правильный порядок элементов без изменения порядка "Username" и ":" в тексте метки, который вы получаете с направлением: 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>

Ответ 6

Я нашел это в w3cschol

p~ul Выбирает каждый элемент <ul>, которому предшествует элемент <p>

Но мой тест не удался. Я не мог заставить его работать. может быть, он не реализован браузерами.