💄 Add disabled and focus-visible style to the select element

TCOTC · TCOTC · commit 5fefbcff6534 · 2026-06-19T07:11:32.000+08:00
diff --git a/app/src/assets/scss/component/_select.scss b/app/src/assets/scss/component/_select.scss
@@ -28,6 +28,10 @@
     @supports (appearance: base-select) {
       appearance: base-select;
 
+      &:disabled {
+        opacity: .68;
+      }
+
       &::picker(select) {
         appearance: base-select;
         color: var(--b3-theme-on-background);
@@ -61,6 +65,11 @@
         &:hover {
           background-color: var(--b3-list-hover);
         }
+
+        &:focus-visible {
+          background-color: var(--b3-list-hover);
+          outline: none;
+        }
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,10 @@`
`28`	`28`	`@supports (appearance: base-select) {`
`29`	`29`	`appearance: base-select;`
`30`	`30`
	`31`	`+ &:disabled {`
	`32`	`+ opacity: .68;`
	`33`	`+ }`
	`34`	`+`
`31`	`35`	`&::picker(select) {`
`32`	`36`	`appearance: base-select;`
`33`	`37`	`color: var(--b3-theme-on-background);`
`@@ -61,6 +65,11 @@`
`61`	`65`	`&:hover {`
`62`	`66`	`background-color: var(--b3-list-hover);`
`63`	`67`	`}`
	`68`	`+`
	`69`	`+ &:focus-visible {`
	`70`	`+ background-color: var(--b3-list-hover);`
	`71`	`+ outline: none;`
	`72`	`+ }`
`64`	`73`	`}`
`65`	`74`	`}`
`66`	`75`	`}`