I have been trying to center the text within a select menu and remove the inner shadow of the select menu on Safari (neither are a problem on other browsers) to no avail. I first tried to get it done with Tailwind as that is what is used in my project and later tried some inline styling as well. With tailwind i can give the classname no-appearance which completely remove any styling in the select element (which is not what i want, because it also removes the arrows that basically show it's a dropdown menu) and furthermore i tried using -webkit-center by putting it in the tailwind-config as a custom class on text-align and also tried to implement -webkit-center by inline styling but neither worked unfortunately.

Is there any way to get this done with Tailwind (or inline styling) at all?

              <label
                htmlFor='active'
                className='rounded-lg shadow-lighterAlt border-none h-8 relative'
              >
                <Image
                  src={activeIcon}
                  alt='Rol icoon'
                  width='0'
                  height='0'
                  style={{ backgroundColor: themeColor }}
                  className='rounded-l-lg px-1.5 -mr-1.5 z-20'
                />
                <select
                  {...register('active')}
                  value={user?.active}
                  disabled={!formAuth}
                  onChange={(e) => setUser({ ...user, active: e.target.value })}
                  className='rounded-r-lg text-sm sm:text-base px-4 capitalize appearance-none'
                >
                  <option value='true'>Actief</option>
                  <option value='false'>Niet actief</option>
                </select>
                <Image
                  src={arrowIcon}
                  alt='Sorteer icoon'
                  width='10'
                  height='auto'
                  className='absolute right-1 top-3.5'
                />
              </label>