Пользовательский угол resizer при фокусе на поле ввода

Question

Как сделать появление кастомного resizer-уголка при фокусе на поле ввода, а при неактивном поле скрыть кастомный уголок?

.textarea {
       position: relative;
       
    }
    .resizer {
       position: relative;
       display: inline-block;
    }
    .resizer:after {
       content:"";
       border-top: 20px solid #27282E;
       border-left: 20px solid transparent;
       border-right: 20px solid transparent;
       -webkit-transform: rotate(-45deg);
       z-index: 1;
       opacity: 0.5;
       position: absolute;
       right: -18px;
       bottom: -3px;
       pointer-events: none;
    }
    .pull-tab {
       height: 0px;
       width: 0px;
       border-top: 20px solid  #FF914D;
       border-left: 20px solid transparent;
       border-right: 20px solid transparent;
       -webkit-transform: rotate(-45deg);
       position: absolute;
       bottom: 0px;
       right: -15px;
       pointer-events: none;
       z-index: 2;
    }

<div class="resizer">
        <div class="pull-tab"></div>
        <textarea placeholder="drag the cyan triangle..."></textarea>
    </div>

Пример на codepen.

Answer 1

В CSS, для отслеживания фокуса на вложенных элементах, используется псевдокласс :focus-within :

.resizer {
  position: relative;
  display: inline-block;
}

.resizer:focus-within::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 0;
  height: 20px; width: 20px;
  background-image: linear-gradient(135deg, #0000 50%, #FF914D 51%);
  filter: drop-shadow(3px 3px 0 #0004);
  pointer-events: none;
}

textarea { resize: none; }
textarea:focus { resize: both; }

<div class="resizer">
  <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

БЛОГ НА HUSL

Пользовательский угол resizer при фокусе на поле ввода

Ответы (1 шт):