Modifying the color of the chosen item - ion-select

Can anyone help me with changing the color of the selected item on ion-select? I've tried several solutions without success. Any suggestions?

Documentation: https://ionicframework.com/docs/api/select

I attempted to use the color property, but it didn't work as expected. It always defaults to the primary color.

I'm trying to set it to tertiary.

<form [formGroup]="form">
          <ion-select
            mode="md"
            formControlName="sortBy"
            placeholder="Sort By"
            interface="popover"
            color="tertiary" // isn't working here
            (ionChange)="sortBy($event)"
          >
            <ion-select-option value="1">Newest</ion-select-option>
            <ion-select-option value="2">Oldest</ion-select-option>
            <ion-select-option value="3">Near Me</ion-select-option>
            
          </ion-select>
        </form>

https://i.sstatic.net/bJbEt.png

htmlcssangulartypescriptionic-framework

Answer №1

To begin in your .ts file, you must establish a variable to store the data for interfaceOptions, with the addition of the customPopoverOptions variable.

customPopoverOptions: any = {
  cssClass: 'popover-wide',
};

Within your html file, include the interfaceOptions to bring in the cssClass from the global.scss:

<ion-select mode="md" [interfaceOptions]="customPopoverOptions" placeholder="Sort By" interface="popover">
  <ion-select-option value="1">Newest</ion-select-option>
  <ion-select-option value="2">Oldest</ion-select-option>
  <ion-select-option value="3">Near Me</ion-select-option>
</ion-select>

Include the following css code in your global.scss. We place it in the global.scss because the ion-popover is attached outside of the current page. In Angular, the CSS of a specific page is confined only to elements of that page.

.popover-wide {
  ion-radio {
    --color-checked: red !important;
  }
}

I have set up a stackblitz demo for you to review my implementation.

Answer №2

Be sure to review the guidelines in the ion-select-option documentation.

https://ionicframework.com/docs/api/select-option

    /*
    * To make this work, be sure to include "my-custom-interface"
    * as the cssClass in the interface options
    */
    .my-custom-interface .select-interface-option {
      color: red;
    }
    
    /* Customize Popover Interface colors using Item's CSS variables */
   .my-custom-interface .select-interface-option {
      --color: #971e49;
      --color-hover: #79193b;
   }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dynamically inserted nested division within a bootstrap grid does not occupy the entire width of the parent division

I am working with a parent div where I am dynamically adding smaller divs with content to achieve a specific layout. Here's how the structure looks: https://i.sstatic.net/tN1s1.png The code for the parent div is shown below: <div class="row" sty ...

jqueryhtmlcssbootstrap-4

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...

pythonhtmlselenium-webdriverautomationwebdriver

Swap out symbols for pictures

To display the 3 icons, I am using https://boxicons.com/. You can find the code here. Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png I encountered two ...

css

Expanding a non-bootstrap navigation bar upon clicking the menu

I'm having some difficulty getting my navigation menu to show up when I click the navigation menu icon. HTML nav role="navigation" class="navbar"> <div class="nav-header"> <a href="#"><span style="font-family: 'Cab ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can I make a Bootstrap 5 container adjust to the height of the screen?

I am currently working with Bootstrap 5 and facing an issue while displaying a calendar on the screen. The height of the container appears to be around 25% longer than the screen height. I have tried setting the height to "100%" and "80%" in the CSS, but i ...

htmlcssbootstrap-5

Unable to simulate a static method in Vitest - encountering an error stating "is not a function"

I am currently writing unit tests using the Vitest framework for my TypeScript and React application, but I have encountered an issue with mocking static methods. Below is a snippet of my code: export class Person { private age: number; constructor(p ...

typescriptunit-testingstaticmockingvitest

Should you approach TypeScript modules or classes with a focus on unit testing?

When it comes to unit testing in TypeScript, which content architecture strategy is more effective: Creating modules or classes? Module Example: moduleX.method1(); // Exported method Class Example: var x = moduleX.method1(); // Public method ...

javascripttypescript

Text in SVG file misaligned at the edge

After creating an SVG with a base64 background image and two text areas for top and bottom texts, I encountered an issue on Internet Explorer and Edge. The problem is that the bottom text is aligned to the left instead of the center, and its position is in ...

javascripthtmlcsssvgmicrosoft-edge

The NextJS image URL remains constant across various endpoints

Currently experiencing an issue with my Channel Tab where the icon and name of the channel are displayed. The problem is that every time I switch channels, the icon remains the same as the first channel I clicked on. PREVIEW This is the code I am current ...

reactjstypescriptnext.jstsx

Steps for showcasing the data entered in the input box

I am looking to enhance my skills in working with Angular and JavaScript. I would greatly appreciate any feedback on the issue I am facing here. My goal is for the text box input to display: "hello {name} , would you like to play a game? However, curr ...

javascripthtmlangularjs

PHP contact form not properly sending complete submission data

I'm facing an issue with my HTML contact form that utilizes JavaScript for a change function. Essentially, I have a dropdown menu for different subjects, and based on the selected option, specific fields should appear. However, when a user fills out t ...

phphtmlemailcontacts

Employees are unable to operate within an HTML page embedded in a WPF project

When running scripts on an HTML page, the page tends to freeze until the script completes. This is why I am considering using workers. However, I have encountered a problem: <html> <head> </head> <body> <button onclick="startWor ...

javascripthtmlwpfmultithreading

Transform the size and convert an object from a picture into text based on the user's scrolling

I've been intrigued by the scrolling effects used on websites like Google SketchUp and Google Plus. It's fascinating how elements can transform as you scroll down the page. For example, on Google SketchUp's site, the banner starts off integr ...

javascriptjqueryhtmlcssscroll

The components are not anchored to the window

In the header, I require: The logo to be positioned on the left side of the banner (without space) Both the banner and logo to always be centered on the page regardless of screen size Four images that should always be at the top right corner of the windo ...

csstwitter-bootstraptwitter-bootstrap-3

Stop unwanted overrides of CSS3 blinking background colors

I am facing an issue with a programmatically created table that has n rows. To distinguish between odd and even rows, I programatically add classes to them. Some of these rows have "special" content that needs to be highlighted. Currently, I am accomplishi ...

htmlcssbackground-colorcss-animations

Steps to activate highlighting for the initial value in a quarterly datepicker

Concerning the quarterPicker feature in the Bootstrap datePicker (SO: how-to-change-bootstrap-datepicker-month-view-to-display-quarters, jsfiddle: jsFiddle): Is there a way to highlight an initial value upon startup? I have tried setting a value in win ...

javascriptjquerycsstwitter-bootstrapdatepicker

Having difficulty authenticating a JWT token in my Nextjs application

Help required with verifying a JWT token in Nextjs as I'm encountering the following error: TypeError: Right-hand side of 'instanceof' is not an object See below for the code I am currently using: useEffect(() => { let token = localS ...

typescriptnext.jsjwt

Tips for eliminating the border on a Twitter widget

Looking to integrate a Twitter widget into my website. The site is built using Smarty and I want to customize the widget. Currently, there is a scroll bar on the right section that I would like to remove by adding a style overflow:hidden to the class strea ...

csstwitterwidgetsmartycustomization

Exploring Java Programming with HTMLEditorKit

Here is my source code: I am trying to change the font color using only CSS. This is how I am inserting HTML: <span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span> When using ...

javahtmlcss

Encountering the error message "This expression cannot be invoked" within a Typescript React Application

I'm working on separating the logic from the layout component in my Typescript React Application, but I suspect there's an issue with the return type of my controller function. I attempted to define a type to specify the return type, but TypeScr ...

javascriptreactjstypescript