it-swarm.com.ru

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

64
Dan Herbert

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

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.

35
Dan Herbert

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

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

6
JayTee

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

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

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

5
user434917

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