How to remove small caret from ion-select in ionic4
Solution 1
I've created this directive which you can add to your ion-select to make it look just like other ion elements with placeholder (without arrow).
Usage:
<ion-select placeholder="Choose" appNoArrow>...
Solution 2
To remove the icon,
ion-select::part(icon) {
display: none !important;
}
To modify the icon,
ion-select::part(icon) {
color: #ffa612 !important;
}
Solution 3
If you want just remove the carets, you can do this:
// ...other page methods
ionViewDidEnter() {
const ionSelects = document.querySelectorAll('ion-select');
ionSelects.forEach((sel) => {
sel.shadowRoot.querySelectorAll('.select-icon-inner')
.forEach((elem) => {
elem.setAttribute('style', 'display: none;');
});
});
}
Based on @Sangminem response
In addition, in my case, I'm using slot="end"
with an ion-icon
to place a replacement icon:
<ion-item lines="inset">
<ion-label position="floating">Label</ion-label>
<ion-select>
<ion-select-option value="1">Option 1</ion-select-option>
<ion-select-option value="2">Option 2</ion-select-option>
<ion-select-option value="2">Option 3</ion-select-option>
</ion-select>
<ion-icon color="danger" slot="end" name="arrow-dropdown-circle" class="ion-align-self-center"></ion-icon>
</ion-item>
Solution 4
I don't know how to fix, faced same problem, but it seems to be issue with DOM Shadow
If you will find anything, let to know as well please, thanks.
Update: Found some answer
UPDATE #2
I created directive in order to have access to Shadow DOM and it's able to add styles into isolated DOM.
HTML:
<ion-select appStyle>
Directive(need to find better implementation):
constructor(private el: ElementRef) {
setTimeout(() => {
this.el.nativeElement.shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'display: none !important');
}, 3000);
}
Solution 5
If there are several ion-select items, here is a sample.
TS Code :
ionViewDidEnter() {
// ion-select customizing
const ionSelects = document.querySelectorAll('ion-select');
let img = null;
ionSelects.forEach((ionSelect) => {
const selectIconInner = ionSelect.shadowRoot.querySelector('.select-icon').querySelector('.select-icon-inner');
if(selectIconInner){
selectIconInner.attributes.removeNamedItem("class");
img = document.createElement("img");
img.src = "./new-arrow-down-image.svg";
img.style.width = "12px";
img.style.paddingTop = "3px";
img.style.paddingLeft = "4px";
img.style.color = "black";
img.style.opacity = "0.5";
selectIconInner.appendChild(img);
}
});
}
Comments
-
Kunal Ranjan almost 2 years
I want to remove the inbuilt grey small caret from
ion-select
, and use my custom caret(arrow) instead.Code:
ion-select { color: grey; background:url("/assets/resources/img/ArrowDownConfig.svg"); }
But my css code is unable to precedence over the ionic(inbuilt).
You can see there are two arrows in the image, one is inbuilt and another is custom. I want to remove inbuilt(ionic) one.
-
Rohinibabu almost 4 yearsYeah, this is working for Ionic 5. Actually I am using "@ionic/angular": "^5.0.4" and it's working fine.
-
nelson6e65 almost 4 yearsI meant... That this doesn’t work for Ionic 4 or less. Only does for Ionic 5 or more.
-
nelson6e65 over 3 yearsBTW, if you use a floating label, you should use
width: 0
instead ofdisplay:none
-
nelson6e65 over 3 yearsBTW, if you use a floating label, you should use
width: 0
instead ofdisplay:none
-
nelson6e65 over 3 yearsBTW, if you use a floating label, you should set
width: 0
style instead ofdisplay:none
-
Tyler2P over 3 yearsNote: answers that are very brief and/or are questions back to the poster should probably be comments. You only need 50 rep points to comment under a question - could you move this there?
-
nelson6e65 almost 3 yearsFor Ionic 5, you should use this answer instead: stackoverflow.com/a/62851330/7242535