Ionic 4 how to change placeholder color

Ionic Framework
1

Hello team,
how to change placeholder color and opacity of ion-select

.select-placeholder {
color: currentColor;
opacity: 1;
}

I try this but not work :confused:

2

try this:

ion-select {
    --placeholder-color: //currentColor
}
3

Try this

–background: aquamarine;

4

thnx for reply,
but this not work

5

Hi, you can add a css class ,for example custom-placeholder, to ion-select :

.custom-placeholder {
color: currentColor;
opacity: 1;
}

6

I was wrong the first try

ion-select {
    color: #f00 !important; //placeholder color
}
1 Like
7

thnx @jjdev it works

8


demokumar

    February 11

thnx for reply,

but this not work

Visit Topic or reply to this email to respond.

In Reply To

albincs

    February 9

Try this –background: aquamarine;

Visit Topic or reply to this email to respond.

To unsubscribe from these emails, click here.

9

Go to this path:
[YOUR_PROJECT_PATH]/node_modules/@ionic/core/dist/esm

Look for this files:

ion-select_3-ios.entry.js

ion-select_3-md.entry.js

open it, and find:

.select-placeholder{color:currentColor;opacity:.33}

change it to what you want

10

there is bug in ion-datetime picker component. if you use color CSS property in class then --placeholder-color does not work as expected because they inherit color class property. so I use tricky way to get this.

datetime picket tag

 <ion-datetime placeholder="_ _:_ _" displayFormat="hh:mm A" pickerFormat="MMM DD, hh:mm A"
            [class.primary]="startTime" [(ngModel)]="startTime"
            (ionChange)="getStartTimeDetails()" [min]="currentTime" minuteValues="0,15,30,45"></ion-datetime>

By default placeholder has gray color so we just need to change color property when we have value. so i use ngclass attribute and apply below class when datepicker has value selected

.primary {
    color: var(--ion-color-primary);
}
11

Some of the css are encapsulated in new version of angular so you can’t override directly by class name.
Just use ng-deep before class name.

like

::ng-deep .classname{
your css code
}

i hope it’s work for you.
:slightly_smiling_face:

12

Put these CSS properties in global.scss. The first is to remove the borders to the text box. The second is when you have it focused, you can remove the edge.

input.searchbar-input {
  border: none !important
}

input[type=search]:not(.browser-default):focus:not([readonly]) {
  border-bottom: 0px !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

Result:
image