title: Style chakra-ui mobile scrollbar and make always visible
body: <p>so the styling in the css={{....}} property gets applied in my browser, but not in Safari on my iPhone. How do i add styling for iOs Safari, and also how can i make it, so that the scrollbar doesn't disappear and is always visible?</p>
  <p>The only style which seems to get applied on iPhone is the webkit-scrollbar-track witdh. (i tested by setting the width to 100px)</p>
  <p>I already tried <a href="https://stackoverflow.com/questions/22907777/make-scrollbar-visible-in-mobile-browsers">this</a> and <a href="https://stackoverflow.com/questions/61096927/how-to-make-scrollbar-always-visible-in-mobile-css-iphone">this</a>, in order to make the scrollbar always visible, but with no success. Below is the code and images of the scroll component on iPhone and Google Chrome on my Mac.</p>
  <p>I also tried using both sx={{....}} css={{....}} while testing. But no difference.</p>
  <pre><code>&lt;MenuList
    variant={&quot;outline&quot;}
    bgColor={&quot;#000000&quot;}
    rounded={10}
    borderColor={&quot;blue.200&quot;}
  &gt;
    &lt;Box
      css={{
        &quot;&amp;::-webkit-scrollbar&quot;: {
          width: &quot;4px&quot;,
        },
        &quot;&amp;::-webkit-scrollbar-track&quot;: {
          width: &quot;6px&quot;,
        },
        &quot;&amp;::-webkit-scrollbar-thumb&quot;: {
          background: &quot;#8ccef0&quot;,
          borderRadius: &quot;24px&quot;,
        },
      }}
      overflowX=&quot;auto&quot;
      maxHeight=&quot;200px&quot;
    &gt;
      {coinsList
        .map(({ label, path }) =&gt; (
          &lt;MenuItem
            pt={1}
            pb={1}
            key={path}
            as={Link}
            to={path}
            color={dropDownValue === label ? undefined : &quot;blue.200&quot;}
          &gt;
            {label}
          &lt;/MenuItem&gt;
        ))}
    &lt;/Box&gt;
  &lt;/MenuList&gt;
  
  </code></pre>
  <p>Menu in Google Chrome on my Mac. Handlebar always visible and styled(blue color):</p>
  <p><a href="https://i.stack.imgur.com/wxGVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wxGVm.png" alt="Menu in Google Chrome on my Mac. Handlebar always visible and styled(blue color)" /></a></p>
  <p>Menu in Safari on my iPhone. Handlebar only visible while scrolling and not styled(grey color, thinner, only track-width style gets applied):</p>
  <p>[<img src="https://i.stack.imgur.com/TsR5i.jpg" alt="Menu in Safari on my iPhone. Handlebar visible while scrolling and not styled(grey color, thinner" /></p>
  <p>[EDIT] While looking on the images after posting the question i noticed, that the whole menu is grey on mobile image. This is due to sending the image to my Mac using Telegram. It is actually the same blue color as the Chrome image, except for handlebar (just for clarification.)</p>