Можно ли изменить цвет фона набора полей на входе: фокус? - PullRequest
Новая
       22

Можно ли изменить цвет фона набора полей на входе: фокус?

4 голосов
/ 29 декабря 2011

Возможно ли изменить цвет фона изменения набора полей формы, когда курсор находится внутри какого-либо из текстовых полей этого набора полей?

Я предполагал, что это может сработать, но это не так: 

fieldset {background: #ffe;}
input[type=text]:focus+fieldset {background: #ff0;}

Ответы [ 5 ]

8 голосов
/ 05 апреля 2015

Вы не можете использовать стиль fieldset в зависимости от состояния фокуса одного из его дочерних элементов input s.

Однако , вы можете смоделировать эффект, добавив пустойdiv как последний потомок fieldset и его стилизация.Стили этого div можно затем изменить, используя общий селектор брата на выделенном input: 

fieldset {
  border: none;
  position: relative;
  margin-bottom: 0.5em;
}

legend {
  position: relative;
  background: white;
}

input:focus {
  background: lightyellow;
}

input:focus ~ div {
  border: 2px solid black;
  background: #def;
}

fieldset > div {
  height: calc(100% - 0.5em);
  width: 100%;
  position: absolute;
  top: 0.5em;
  left: 0;
  border: 2px solid lightgray;
  z-index: -1;
}
<fieldset>
  <legend>Fieldset 1</legend>
  <input name="text1" type="text" />
  <input name="text2" type="text" />
  <div></div>
</fieldset>
<fieldset>
  <legend>Fieldset 2</legend>
  <input name="text3" type="text" />
  <input name="text4" type="text" />
  <div></div>
</fieldset>
1 голос
/ 06 июня 2018

Теперь это возможно с :focus-within

. Псевдокласс: focus-Within CSS представляет элемент, который получил фокус или содержит элемент, который получил фокус.Другими словами, он представляет элемент, который сам соответствует псевдоклассу: focus или имеет потомка, которому соответствует: focus.(Это включает потомков в теневых деревьях.)

MDN 

fieldset {
  background: green;
  margin: 1em;
}

fieldset:focus-within {
  background: red;
}
<fieldset>
  <input>
</fieldset>
1 голос
/ 29 декабря 2011

Боюсь, что это невозможно с CSS, так как у CSS нет селектора, который выбирал бы на основе дочерних элементов. Селектор input[type=text]:focus+fieldset в вашей попытке соответствует элементу fieldset, который сразу же следует за сфокусированным текстовым полем ввода - что-то совершенно иное, чем вы хотите.

Однако возможно и довольно легко справиться с этим с помощью JavaScript. Вам просто потребуются обработчики событий onfocus и onblur для полей внутри набора полей, и эти обработчики могут быть одинаковыми функциями для всех из них; они просто изменили бы свойство style.background элемента fieldset,

0 голосов
/ 11 июля 2012

Если вы используете Jquery и не вкладываете свои наборы полей, вы можете сделать простое связывание, которое присоединяется ко всем вашим элементам управления страницы в наборах полей, и всякий раз, когда вы фокусируете / не фокусируете на любом из этих элементов управления, классдобавлено / удалено из набора полей, содержащего элемент управления.

Вот пример:

$('input, label, select, option, button', 'fieldset').each(function (index, item) { $(this).focus(function () { $(this).closest('fieldset').addClass('fieldsetFocus'); }); $(this).blur(function () { $(this).closest('fieldset').removeClass('fieldsetFocus'); }); });

0 голосов
/ 29 декабря 2011

Если вы не используете набор полей по причинам доступности, просто сделайте что-то вроде этого:

http://www.pmob.co.uk/temp/categorybox.htm

Если вам это нужно как для границ, так и для обеспечения доступности, рассмотрите возможность оборачивания набора полей в div и затем стилизуйте его, содержащий div вместо fieldset.

Надеюсь, это поможет!

Мэтт

...