Picker wheel for <select> tag doesn't show in iphone ios 15 in React-JS PWA

Viewed 389

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.

1 Answers

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.

Related