Search code examples
cssangularionic-frameworksasscoding-style

How to change input float name color on ionic?

enter image description here

I want to change the color of the float name for the input.

i set --border-color: #222428; and this change the color of borders only, i need to change color of the word password and email on hover, showing up floating.

      <ion-input style="margin: 15px; width: auto; --border-color: #222428;" label="Email" label-placement="floating" fill="outline" placeholder="Your Email address"></ion-input>
      <ion-input style="margin: 15px; width: auto; --border-color: #222428;" type="password" label="Password" label-placement="floating" fill="outline" placeholder="Your Password"></ion-input>

i try this : (i add color:black in style and the word password dosnt change !)

      <ion-input style="margin: 15px; width: auto; --border-color: #222428; color:black" label="Email" label-placement="floating" fill="outline" placeholder="Your Email address"></ion-input>
      <ion-input style="margin: 15px; width: auto; --border-color: #222428; color:black" type="password" label="Password" label-placement="floating" fill="outline" placeholder="Your Password"></ion-input>
Solution

  • See docs: https://ionicframework.com/docs/api/input#css-custom-properties-1

    Use: --highlight-color-focused

    <ion-input
  style="margin: 15px; width: auto; --border-color: #222428; --highlight-color-focused: #222428"
  label="Email"
  label-placement="floating"
  fill="outline"
  placeholder="Your Email address"
></ion-input>

    The input can be valid or invalid, there are properties for this again, maybe you have to set them to the same color or others of your choice.

    --highlight-color-invalid and --highlight-color-valid