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

Источник

5 ответов

Решение

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

Источник

Спецификация CSS Selectors 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..

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

Источник

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

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

это выберет метку, которая имеет значение 'username' в атрибуте 'for'

Источник

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