diff --git a/build.dev.js b/build.dev.js
index 4a90832..a1ab213 100644
--- a/build.dev.js
+++ b/build.dev.js
@@ -29,6 +29,14 @@ $cd: #62778d #526273 #425064;
   transition:$c $t $m;
 }
 
+@mixin focus1(){
+  box-shadow: 0 0 2px #88f7df;
+}
+
+@mixin focus2(){
+  box-shadow: 0 0 2px #f3be4d;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;padding: 0;
@@ -114,7 +122,7 @@ function mkWCFile({ style, html, js }) {
     .replace('unmount()', 'disconnectedCallback()')
     .replace(
       'watch() {',
-      'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
+      'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
     )
     .replace('adopted()', 'adoptedCallback()')
 
diff --git a/build.prod.js b/build.prod.js
index 4d2a8da..d9a0193 100644
--- a/build.prod.js
+++ b/build.prod.js
@@ -29,6 +29,14 @@ $cd: #62778d #526273 #425064;
   transition:$c $t $m;
 }
 
+@mixin focus1(){
+  box-shadow: 0 0 2px #88f7df;
+}
+
+@mixin focus2(){
+  box-shadow: 0 0 2px #f3be4d;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;padding: 0;
@@ -121,7 +129,7 @@ function mkWCFile({ style, html, js }) {
     .replace('unmount()', 'disconnectedCallback()')
     .replace(
       'watch() {',
-      'attributeChangedCallback(name, old, val) {\nif (old === val) {return}'
+      'attributeChangedCallback(name, old, val) {\nif (val === null || old === val) {return}'
     )
     .replace('adopted()', 'adoptedCallback()')
 
diff --git a/src/form/button.wc b/src/form/button.wc
index 36d10a1..ead699f 100644
--- a/src/form/button.wc
+++ b/src/form/button.wc
@@ -108,6 +108,9 @@
   }
   button {
     background: #fff;
+    // &:active {
+    border-color: nth($cp, 3);
+    // }
   }
 }
 
@@ -234,10 +237,11 @@
 }
 
 :host(:focus-within) {
-  box-shadow: 0 0 3px nth($ct, 1);
+  @include focus1;
 }
-:host(:focus-within[disabled]) {
-  box-shadow: 0 0 3px nth($co, 1);
+:host(:focus-within[disabled]),
+:host(:focus-within[loading]) {
+  box-shadow: none;
 }
 </style>
 
diff --git a/src/form/input.wc b/src/form/input.wc
index 0ff8cf0..fe6096c 100644
--- a/src/form/input.wc
+++ b/src/form/input.wc
@@ -152,10 +152,10 @@ li {
   opacity: 0.6;
 }
 :host(:focus-within) {
-  box-shadow: 0 0 3px nth($ct, 1);
+  @include focus1;
 }
 :host(:focus-within[readonly]) {
-  box-shadow: 0 0 3px nth($co, 1);
+  @include focus2;
 }
 
 :host([type='textarea']) {
diff --git a/src/form/select.wc b/src/form/select.wc
index f9e109e..eb1121a 100644
--- a/src/form/select.wc
+++ b/src/form/select.wc
@@ -166,10 +166,10 @@
   opacity: 0.6;
 }
 :host(:focus-within) {
-  box-shadow: 0 0 3px nth($ct, 1);
+  @include focus1;
 }
 :host(:focus-within[readonly]) {
-  box-shadow: 0 0 3px nth($co, 1);
+  @include focus2;
 }
 
 /* 额外样式 */
diff --git a/src/icon/index.wc b/src/icon/index.wc
index 767c03b..80a3fd7 100644
--- a/src/icon/index.wc
+++ b/src/icon/index.wc
@@ -124,8 +124,8 @@ export default class Icon {
   watch() {
     switch (name) {
       case 'is':
+        this.props.is = val
         if (val) {
-          this.props.is = val
           this.drawPath()
         } else {
           this.removeAttribute('is')
diff --git a/src/layer/index.wc b/src/layer/index.wc
index 0e53d09..8882e85 100644
--- a/src/layer/index.wc
+++ b/src/layer/index.wc
@@ -163,7 +163,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 3px nth($ct, 1);
+        @include focus1;
       }
 
       &:last-child {
diff --git a/src/picker/date.wc b/src/picker/date.wc
index 57643c0..be089e6 100644
--- a/src/picker/date.wc
+++ b/src/picker/date.wc
@@ -208,10 +208,10 @@
 }
 
 :host(:focus-within) {
-  box-shadow: 0 0 3px nth($ct, 1);
+  @include focus1;
 }
 :host(:focus-within[readonly]) {
-  box-shadow: 0 0 3px nth($co, 1);
+  @include focus2;
 }
 :host([disabled]) {
   opacity: 0.6;