sunakshi
sunakshi

Reputation: 31

How can we remove caret sign from drop down in ion-select.I don't want to show any icon.Only text should be shown

I want to remove that default caret sign.I don't want to show any icon.I have html and .ts files.I am using ionic 4 and angular 7.I only want to display "select" label with no caret button along with it.

Here is my code:-

Home.html :

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

    <ion-item>
        <h2>Title</h2>
        <h4 style="opacity: 0.5">Description</h4>
    </ion-item>

    <ion-item>
        <ion-label>Select</ion-label>
        <ion-select interface="popover">
            <ion-option *ngFor="let option of options">
                <h2>{{ option.title }}</h2>
                <h4>{{ option.description }}</h4>
            </ion-option>
        </ion-select>
    </ion-item>

</ion-content>

I want to remove that default caret sign.I don't want to show any icon.I have html and .ts files.I am using ionic 4 and angular 7.I only want to display "select" label with no caret button along with it. Here is my .ts file below:

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

 @Component({
 selector: 'page-home',
 templateUrl: 'home.html'
 })
 export class HomePage {

       options = [
       {
          title: 'Banana',
          description: 'Long curved yellow fruit.'
       },
       {
            title: 'Dog',
            description: 'Man\'s best friend.'
      },
      {
           title: 'Ionic',
           description: 'Modificates the options text.'
      }
   ];
          constructor(public navCtrl: NavController) { }

  }

Upvotes: 1

Views: 376

Answers (0)

Related Questions