Могу ли я обновить стиль родителей после элемента, когда вход внутри него сфокусирован с использованием CSS / SCSS? - PullRequest
Новая
       44

Могу ли я обновить стиль родителей после элемента, когда вход внутри него сфокусирован с использованием CSS / SCSS?

1 голос
/ 29 мая 2019

Могу ли я обновить стиль родительских элементов после элемента, когда вход внутри него сфокусирован?

Конструкция означает, что мне нужно использовать элемент после, а не стилизовать ввод с рамкой, но мне нужно обновитьцвет фона элемента after, когда ввод фокусируется.Могу ли я сделать это только с помощью SCSS / CSS?

HTML 

<div class="subscribe__wrapper">
    <div class="subscribe__input">
        <input class="mr-medium" type="email" id="fields-emailAdress" required name="fields[email]"
            placeholder="Your email address">
    </div>
    <button class="next btn-rounded btn-rounded--small ml-min">
    </button>
</div>

SCSS 

.subscribe__wrapper {
position: relative;
&:after {
      content: '';
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: $border-color;
      position: absolute; 
    }
}

.subscribe__wrapper input:focus {
  .subscribe__wrapper & {
     &:after {
          background: red;
        } 
    }
}

1 Ответ

0 голосов
/ 29 мая 2019

С чистым CSS и текущей разметкой нет, это невозможно. См. Этот связанный вопрос .

Однако, как предлагается в принятом ответе на этот вопрос, вы можете изменить свою разметку, добавив еще один элемент после ввода, а затем стилизовав ее с помощью селектора-родителя (+ или ~), когда вход находится в фокусе.Этот новый элемент будет иметь фон вместо того, чтобы помещать его в псевдоэлемент .subscribe__wrapper.

Например: 

.subscribe__wrapper {
  position: relative;
  z-index: 0;
  padding: 12px;
  border: 2px solid blue;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.subscribe__wrapper input:focus + .background {
  background-color: red;
}
<div class="subscribe__wrapper">
  <div class="subscribe__input">
    <input class="mr-medium" type="email" id="fields-emailAdress" required name="fields[email]" placeholder="Your email address">
    <div class="background"></div>
  </div>
  <button class="next btn-rounded btn-rounded--small ml-min"></button>
</div>
...