Ion-input onFocused style scss

Hello,

I am with a problem, where I need to change ONLY the style of an ion-input, when an ion-input field are focused (with the cursor blinking inside him), then when this field lose the focus, the ion-input change to a style without focus.

Well, I have tried everything what i have founded in the internet, but none worked… like .item-has-focus, not working, I had put in global.scss, in the page.scss, and nothing working…

Some one can help me ? I am stopped in this problem have days…

This worked fine, but all ion-input in the page have the same style (I do not want this)

ion-input{
  border-radius: 10px !important;
  padding-right: 30px;
  font-size: 0.9em;
  border: 1px solid #f1f1f1 !important;
  --background: rgb(219,219,219) !important;
  /* height: 10%; */
  /* width: 41%; */
  max-width: 50vw; // this is applying perfectly
  max-height: 10vh;
}

This not worked, is this what I need, change the style when the ion-input has focus.

ion-input.item-has-focus{
  border-radius: 10px !important;
  padding-right: 30px;
  font-size: 0.9em;
  border: 1px solid #f1f1f1 !important;
  --background: rgb(219,219,219) !important;
  /* height: 10%; */
  /* width: 41%; */
  max-width: 50vw; // this is applying perfectly
  max-height: 10vh;
}

Thanks a Lot.

1 post - 1 participant

Read full topic