Highlight an ion-input in a ion-item using box-shadow on focus - v4

@javasol wrote:

Hi,

I’m trying to highlight input fields when the user focuses on them to highlight the current field. I’ve tried multiple suggestions by modifying the .scss file, it seems like everything in that file is ignored. I do have a workaround using javascript but I don’t like it. Can someone point out a straightforward way to implement this?

Here is what I’m using, this is for ion-textarea but same idea for ion-input. This works but I would rather just modify the .scss of this component instead of using javascript :

    <ion-item id="progressItem">
      <ion-label position="stacked">Progress:</ion-label>
      <ion-textarea rows=3 [(ngModel)]="progress" name="progress" autocomplete="on" spellcheck="true"
        autocorrect="on" disabled={{readonly}} [attr.maxlength]="450" id="progressId"
        (ionFocus)="inputHasFocus('#progressItem', '.item-inner')" (ionBlur)="inputLostFocus('#progressItem', '.item-inner')"></ion-textarea>
    </ion-item>

and then in the .ts file:

 highlightCss = ' border: 1px solid #7bc1f7; '+
  ' box-shadow: 5px 5px 10px 5px #7bc1f7; '+
  ' -moz-box-shadow: 5px 5px 10px 5px #7bc1f7; '+
  ' -webkit-box-shadow: 5px 5px 10px 5px #7bc1f7; padding-left:5px;';

  inputHasFocus(inputId, inputType){
      document.querySelector(inputId).shadowRoot.querySelector(inputType).setAttribute('style', this.highlightCss);
  }
  noLightCss = 'border: none; box-shadow: 0px; -moz-box-shadow: 0px; -webkit-box-shadow: 0px; padding-left:5px;';
  inputLostFocus(inputId, inputType){
    document.querySelector(inputId).shadowRoot.querySelector(inputType).setAttribute('style', this.noLightCss);
  }

Posts: 1

Participants: 1

Read full topic