diff --git a/src/settings/SettingsModal.module.css b/src/settings/SettingsModal.module.css
index b07cb4c81..b710f9d1f 100644
--- a/src/settings/SettingsModal.module.css
+++ b/src/settings/SettingsModal.module.css
@@ -33,3 +33,22 @@ Please see LICENSE in the repository root for full details.
 .volumeSlider > p {
   color: var(--cpd-color-text-secondary);
 }
+
+.volumeSlider > select {
+  display: block;
+  width: 100%;
+  padding: 8px 12px;
+  margin-top: var(--cpd-space-1x);
+  border: 1px solid var(--cpd-color-border-interactive-primary);
+  border-radius: 4px;
+  background-color: var(--cpd-color-bg-canvas-default);
+  color: var(--cpd-color-text-primary);
+  font-size: var(--font-size-body);
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.volumeSlider > select:focus {
+  outline: none;
+  border-color: var(--cpd-color-text-link-external);
+}
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 6ccafec1e..88918e76b 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -138,14 +138,12 @@ export const SettingsModal: FC<Props> = ({
         </FieldRow>
         {advancedEnabled && (
           <>
-            <FieldRow>
-              <InputField
+            <div className={styles.volumeSlider}>
+              <label htmlFor="screenShareResolution">
+                {t("settings.screen_share_resolution_label", "Resolution")}
+              </label>
+              <select
                 id="screenShareResolution"
-                label={t(
-                  "settings.screen_share_resolution_label",
-                  "Resolution",
-                )}
-                type="select"
                 value={resolution}
                 onChange={(e): void => setResolution(e.target.value)}
               >
@@ -154,8 +152,8 @@ export const SettingsModal: FC<Props> = ({
                 <option value="1920x1080">1080p</option>
                 <option value="2560x1440">1440p</option>
                 <option value="3840x2160">4K</option>
-              </InputField>
-            </FieldRow>
+              </select>
+            </div>
             <div className={styles.volumeSlider}>
               <label>
                 {t("settings.screen_share_framerate_label", "Framerate")}
@@ -188,20 +186,23 @@ export const SettingsModal: FC<Props> = ({
                 }
               />
             </div>
-            <FieldRow>
-              <InputField
+            <div className={styles.volumeSlider}>
+              <label htmlFor="screenShareCodec">
+                {t("settings.screen_share_codec_label", "Codec")}
+              </label>
+              <select
                 id="screenShareCodec"
-                label={t("settings.screen_share_codec_label", "Codec")}
-                type="select"
                 value={codec}
-                onChange={(e): void => setCodec(e.target.value as VideoCodec)}
+                onChange={(e): void =>
+                  setCodec(e.target.value as VideoCodec)
+                }
               >
                 <option value="vp8">VP8</option>
                 <option value="vp9">VP9</option>
                 <option value="h264">H.264</option>
                 <option value="av1">AV1</option>
-              </InputField>
-            </FieldRow>
+              </select>
+            </div>
           </>
         )}
       </>