CODEWITHSUNDEEP
htmlcssinputangular6box-shadow
fariba.j
fariba.j

Reputation: 1865

how to change the box shadow after click in the input using angular 6?

I'm using angular 6 and material in my project and I have an input box. I want the box shadow to change after I click in the input and after I click out, here are my codes :

.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);
  }

I don't know how can I get the active status of input

Upvotes: 1

Views: 4435

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44125

What you can do is use the :focus pseudo-class:

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);
}

And if it's not focused:

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

Upvotes: 1

Related Questions