Ion-select, alert, text color

Ionic Framework ionic-v3
1

I created a simple ion-select, and i changed the background, button (which is the selected element too) color.
However, i tried the options what i found here, but i cannot change the color of the texts and title. Can someone help me out, how to do this?

image
Screenshot_2017-04-05-16-45-10[1].png1080Ă—1920 70.7 KB

2

Provide some code of how you created this interface, please.

3

This the way how i created the ion-select.

<div>
  <ion-item>
    <ion-label color="primary">Sample Rate</ion-label>
    <ion-select [(ngModel)]="singletonService.sampleRate" selected>
      <ion-option *ngFor="let key of singletonService.sampleRates" [value]="key">{{ key }} Hz</ion-option>
    </ion-select>
  </ion-item>
</div>

Then i designed it in variable.scss

$alert-md-background-color: #424242; //this makes “black” the background
$alert-md-button-text-color: #388E3C; //it makes green the buttons, and the selected element

And i tried others, like text-color, radio-label-text-color, check-label-text-color etc. but the labels/texts stay black.

4

Hm, documentation says it should be $alert-md-radio-label-text-color:
https://ionicframework.com/docs/api/components/alert/AlertController/#sass-variables → Material Design → Search for “radio”

5

Well, i tried it again, but nothing happens. I also thought it should be the good answer.

$alert-md-radio-label-text-color: purple;
$alert-md-radio-label-text-color-checked: red;

Very strange, but the checked label is red now, but the normal label is still black. Any idea?

6

I’d suggest you look at the generated CSS and inspect the elements with Dev tools to see if something is missing or broken… (Did you check on the device? Maybe it works there…)

7

I am only check it on device. However thanks i will investigate more (the whole designing can be more faster and easier if i can use browser, but because of the native things, the project shows empty screen in browser)

8

(There should be ways to work around this - maybe create a new thread asking how to fix this and describe a bit about your plugins)

1 Like
9

We can change the the style for select options using css and ts.

To get an idea, refer my GitHub repository:https://github.com/ketanyekale/ionic-color-and-image-selector

In home.scss I’ve applied css by iterating the colors and images SASS lists. In prepareColorSelector and prepareImageSelector I have iterated the colors and images arrays to match the option values and apply the CSS classes.

This is not the exact solution for your question but this will allow you to do wonders with scss and ts.