使用伪元素替换用于上传文件的选择文件按钮

jerrykuku · Mar 22, 2023 · de3ab8c · de3ab8c · SpeedPartner · Apr 3, 2023
1 parent 1c1b742
commit de3ab8c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css
@@ -1256,6 +1256,15 @@ small {
   color: #fb6340;
   border: 1px dashed #fb6340;
 }
+::file-selector-button {
+  color: #fff;
+  border-radius: .25rem;
+  border: 1px solid #2e6da4;
+  padding: .4rem .5rem;
+  background-color: #337ab7;
+  box-sizing: border-box;
+  cursor: pointer;
+}
 fieldset > fieldset {
   margin: 0;
   padding: 0;

diff --git a/htdocs/luci-static/argon/css/dark.css b/htdocs/luci-static/argon/css/dark.css
@@ -524,6 +524,11 @@ fieldset[id^="cbi-apply-"] {
   border: 1px dashed darkorange !important;
 }
 
+::file-selector-button {
+  border: 1px solid darkseagreen !important;
+  background-color: darkseagreen !important;
+}
+
 .node-services-vssr .block h4 span {
   color: #ccc !important;
 }

diff --git a/htdocs/luci-static/argon/less/cascade.less b/htdocs/luci-static/argon/less/cascade.less
@@ -1508,6 +1508,16 @@ small {
     border: 1px dashed #fb6340;
 }
 
+::file-selector-button {
+    color: #fff;
+    border-radius: .25rem;
+    border: 1px solid #2e6da4;
+    padding: .4rem .5rem;
+    background-color: #337ab7;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
 fieldset>fieldset {
     margin: 0;
     padding: 0;

diff --git a/htdocs/luci-static/argon/less/dark.less b/htdocs/luci-static/argon/less/dark.less
@@ -597,6 +597,11 @@ fieldset[id^="cbi-apply-"] {
     border: 1px dashed darkorange !important;
 }
 
+::file-selector-button {
+  border: 1px solid darkseagreen !important;
+  background-color: darkseagreen !important;
+}
+
 .node-services-vssr .block h4 span{
     color: #ccc !important;
 }