I have a select input and a box. The select box in iphone IOS 12 or less appear as a wheel picker, but in IOS 15, appear as a black box. I want it to appear as a wheel picker too. Here is my code:
<InputWrapper>
<Label>{t('province')}</Label>
<Select {...register('province')} defaultValue={profile?.province} onChange={filterCities}>
{provinces.map(province => {
return (
<Option key={province.id} value={province.name}>
{province.name}
</Option>
);
})}
</Select>
</InputWrapper>
And here is my style:
export const InputWrapper=styled.div`
padding:10px 5px;
display:flex;
flex-direction:column;
`
export const Label=styled.label`
font-size:13px;
font-weight:400;
margin:5px;
`
export const Select=styled.select`
background-color:var(--secondaryBackground);
padding:10px 15px;
font-size:16px;
font-weight:500;
border-radius: 4px;
border:1px solid var(--boxShadow);
flex-grow:1;
color:var(--primaryText);
`
export const Option=styled.option`
background-color:var(--secondaryBackground);
padding:5px 15px;
font-size:14px;
font-weight:400;
border:1px solid var(--primaryText);
border-radius:10px;
width:50%;
color:var(--primaryText);
`
I want my select option appear as a wheel picker in all IOS versions in Iphone. please help me. Thanks in advance.
The way select inputs are represented when they are opened changed between iOS 12 and 15. Apart from rolling your own custom implementation of a select box (a reasonable approach is given in WAI-ARIA Authoring Practices 1.2), you're bound to the way the version of Safari that shipped with the iOS version on the device represents it.
The built-in select works fine, just looks differently depending on the iOS version.