How to change input float name color on ionic?

Question

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>

dariosko · Accepted Answer · 2024-01-12 09:39:28Z

2

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

answered Jan 12, 2024 at 9:39

dariosko

3741 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change input float name color on ionic?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related