How to remove the small caret from <select>

ionic-v1
1

Hi I am new to Ionic. I would like to have the select with different caret or perhaps none at all. I have used the chrome dev tools to find it but no luck so far. Any ideas?

image
Screen Shot 2015-08-02 at 4.37.29 PM.png700×152 21.4 KB

Thanks!`

2

Hi,
You could do this with straight css. To remove the caret, all you need to do is appearance:none on the select. If you want to change the arrow, you can do background: url(path to caret image) no-repeat right #ddd, where #ddd is whatever color you want for your caret, and path to caret image is the local or online link to your caret image, like http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png.

Best of luck!
Wilson

3

Hi Wilson,

Thanks for your reply. I know that I can remove the white arrow pair using css -webkit-appearance:none, what I want though is too remove the grey caret (from ionic). Your tips for URL will definitely be helpful for my future reference, however setting up the color actually set background color on the select element instead of coloring the icon.

Any other ideas?

I tried to override background on the select, label, and div class=list element all with no luck. :frowning:

4

You could change the icon color in photoshop, and overide the background with !important.

5

In case anybody else wants the same thing, I managed this in Ionic 2 by putting the select in a surrounding div:

 <div class="selectWrapper>
     <ion-select...

and adding this to the sass file:

    .selectWrapper {
	.select-icon {
		visibility: hidden;
	}
     }
6 Likes
6

Thanks for this solution. It was really helpful, saved my time.

7

still works on ionic 3

8

This is not working in ionic 4. Is there any solution available to override css in ionic 4.

9

This is not working in ionic 4. Is there any solution available to override css in ionic 4.
below css code:
.select-icon{
visibility:hidden;
}
or
.select-icon-inner{
visibility:hidden;
}
is not working in ionic 4.