diff --git a/src/calendar.vue b/src/calendar.vue
index bf8d9b3..e0d4c76 100644
--- a/src/calendar.vue
+++ b/src/calendar.vue
@@ -5,19 +5,19 @@
       <a
         v-show="panel !== 'TIME'"
         class="mx-icon-last-year"
-        @click="handleIconYear(-1)">&laquo;</a>
+        @click="handleIconYear(-1)">&#171;</a>
       <a
         v-show="panel === 'DATE'"
         class="mx-icon-last-month"
-        @click="handleIconMonth(-1)">&lsaquo;</a>
+        @click="handleIconMonth(-1)">&#8249;</a>
       <a
         v-show="panel !== 'TIME'"
         class="mx-icon-next-year"
-        @click="handleIconYear(1)">&raquo;</a>
+        @click="handleIconYear(1)">&#187;</a>
       <a
         v-show="panel === 'DATE'"
         class="mx-icon-next-month"
-        @click="handleIconMonth(1)">&rsaquo;</a>
+        @click="handleIconMonth(1)">&#8250;</a>
       <a
         v-show="panel === 'DATE'"
         class="mx-current-month"
diff --git a/src/index.scss b/src/index.scss
index 55d38b1..4b69557 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -6,7 +6,8 @@ $primary-color: #1284e7;
   display: inline-block;
   width: 210px;
   color: $default-color;
-  font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
+  font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei',
+    sans-serif;
   * {
     box-sizing: border-box;
   }
@@ -170,7 +171,7 @@ $primary-color: #1284e7;
   float: left;
   color: $default-color;
   padding: 6px 12px;
-  font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,sans-serif;
+  font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, sans-serif;
   * {
     box-sizing: border-box;
   }
@@ -196,6 +197,7 @@ $primary-color: #1284e7;
       padding: 0 6px;
       font-size: 20px;
       line-height: 30px;
+      user-select: none;
     }
     .mx-icon-last-month {
       float: left;
@@ -204,10 +206,10 @@ $primary-color: #1284e7;
       float: right;
     }
     .mx-icon-last-year {
-      @extend .mx-icon-last-month
+      @extend .mx-icon-last-month;
     }
     .mx-icon-next-year {
-      @extend .mx-icon-next-month
+      @extend .mx-icon-next-month;
     }
   }
 }
@@ -232,7 +234,7 @@ $primary-color: #1284e7;
       cursor: not-allowed;
       color: #ccc;
       background-color: #f3f3f3;
-    }  
+    }
   }
 }
 
@@ -246,7 +248,8 @@ $primary-color: #1284e7;
   table-layout: fixed;
   border-collapse: collapse;
   border-spacing: 0;
-  td, th {
+  td,
+  th {
     font-size: 12px;
     width: 32px;
     height: 32px;
@@ -292,8 +295,8 @@ $primary-color: #1284e7;
   list-style: none;
   width: 100%;
   height: 100%;
-  border-top: 1px solid rgba(0,0,0,.05);
-  border-left: 1px solid rgba(0,0,0,.05);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
   overflow-y: auto;
   .mx-time-picker-item {
     display: block;