How to delete flat arrow of IonSelect on ionic 5 use Reactjs. I custom it and i want to delete it.
Inspect the element using the Chrome Dev Tools, see what CSS rule is adding that arrow and override it with a display: none in your own CSS styles.
You need to use the ::part pseudo-element because Ionic uses web components. Here’s an example of how to hide the ion-select icon.
thanks, it’s work. I can’t find the ::part on ionic docs. ::part is css pseudo-element, right?
and i have a question:
I create IonRadioGroup with IonRadio and i try to style when i check radio it will change style. But it’s just work when IonRadio not use display: none. When i use display: none it not trigger.
this image i style radio opacity: 0; it work.
<IonList>
<IonText className="cleaning__title">
How many bathrooms / toilet?
</IonText>
<IonRadioGroup
value={selected}
onIonChange={(e) => setSelected(e.detail.value)}
>
<IonList className="listRadio">
<IonItem
lines="none"
className="ion-no-padding ion-no-margin noPad"
>
<IonRadio
className="styleRadio"
slot="start"
value="1 Toilet"
/>
{selected === "1 Toilet" ? (
<IonList>
<IonImg className="iconRadio showIcon" src={iconCheck} />
<IonList className="listRadio__item checkList">
<IonLabel className="flexLabelCleaning">
<IonLabel className="blueNum">1</IonLabel>Toilet
</IonLabel>
</IonList>
</IonList>
) : (
// <IonImg className="iconRadio showIcon" src={iconCheck} />
<IonList>
<IonImg
className="iconRadio hiddenIcon"
src={iconCheck}
/>
<IonList className="listRadio__item">
<IonLabel className="flexLabelCleaning">
<IonLabel>1</IonLabel>Toilet
</IonLabel>
</IonList>
</IonList>
)}
{/* <IonImg className="iconRadio showIcon" src={iconCheck} />
<IonList className="listRadio__item checkList">
<IonLabel className="flexLabelCleaning">
<IonLabel className="blueNum">1</IonLabel>Toilet
</IonLabel>
</IonList> */}
</IonItem>
</IonList>
It’s working on the Android and the web but not on the iPhone.
Any solution.