Как изменить тень блока после щелчка на входе, используя угловой 6? - PullRequest
Новая
       17

Как изменить тень блока после щелчка на входе, используя угловой 6?

0 голосов
/ 10 сентября 2018

Я использую угловой 6 и материал в своем проекте, и у меня есть поле ввода. Я хочу, чтобы тень блока менялась после того, как я щелкнул по входу и после того, как я щелкнул, вот мои коды:

.html 

<div class="search-bar" fxFlex>
    <form class="search-form" fxShow="false" fxShow.gt-xs>
      <mat-icon>search</mat-icon>
      <input type="text" matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" autofocus="true" />
    </form>
  </div>

.css 

 .search-bar .search-form {
    background: rgba(255,255,255,1);
    position: relative;
    margin-right: 5px;
    display: block;
    width: 99.8%;
    border: solid 1px rgba(119, 119, 119, .55);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
  }

Я не знаю, как я могу получить активный статус ввода

1 Ответ

0 голосов
/ 10 сентября 2018

Что вы можете сделать, это использовать псевдокласс :focus: 

input:focus form {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
}

А если не сфокусировано: 

input:not(:focus) form {
    box-shadow: none;
}
...