diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index a351b38..a2cb811 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -10,7 +10,7 @@ import { platform } from 'platforms'
 import * as React from 'react'
 import { cx } from 'utils/cx'
 import * as DOMHelper from 'utils/DOMHelper'
-import { run } from 'utils/general'
+import { detectBrowser, run } from 'utils/general'
 import { useCatchNetworkError } from 'utils/hooks/useCatchNetworkError'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useOnPJAXDone, usePJAX } from 'utils/hooks/usePJAX'
@@ -49,6 +49,10 @@ export function SideBar() {
     }
   }, [hasMetaData])
 
+  React.useEffect(() => {
+    if (detectBrowser() === 'Safari') DOMHelper.markGitakoSafariFlag()
+  }, [])
+
   const sidebarToggleMode = configContext.value.sidebarToggleMode
   const intelligentToggle = configContext.value.intelligentToggle
   const $shouldShow = useStateIO(intelligentToggle === null ? false : intelligentToggle)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index a3b5681..c7146cd 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -979,6 +979,24 @@ $minimal-z-index: max(
   }
 }
 
+// patches for Safari
+.gitako-safari {
+  .#{$name}-side-bar {
+    .#{$name}-side-bar-body {
+      .#{$name}-settings-bar {
+        &-content {
+          .field {
+            select {
+              -webkit-appearance: none;
+              padding: 0 6px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 // gitee
 .git-project {
   // reset styles
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 94ddee9..b369b46 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -2,15 +2,24 @@
  * this helper helps manipulating DOM
  */
 
+export function setGitakoBodyClass(className: string, enable: boolean) {
+  const classList = document.body.classList
+  if (enable) classList.add(className)
+  else classList.remove(className)
+}
+
 /**
  * when gitako is ready, make page's header narrower
  * or cancel it
  */
 export function markGitakoReadyState(ready: boolean) {
   const readyClassName = 'gitako-ready'
-  const classList = document.body.classList
-  if (ready) classList.add(readyClassName)
-  else classList.remove(readyClassName)
+  return setGitakoBodyClass(readyClassName, ready)
+}
+
+export function markGitakoSafariFlag(enable = true) {
+  const className = 'gitako-safari'
+  return setGitakoBodyClass(className, enable)
 }
 
 /**