修改select样式

element-variables.scss

@@ -123,7 +123,7 @@ $--input-border-color-hover: #B3B5BA !default;
 $--background-color-base: #F6F6F6 !default;
 $--background-color-light: #F5F6F7 !default;
 $--background-color-lighter: #F8F8F8 !default;
-
+$--background-select-checked: #D1ECFF !default;
 
 /* Link
 -------------------------- */
@@ -359,24 +359,24 @@ $--select-option-color: $--color-text-regular !default;
 $--select-option-disabled-color: $--color-text-placeholder !default;
 $--select-option-disabled-background: $--color-white !default;
 /// height||Other|4
-$--select-option-height: 34px !default;
-$--select-option-hover-background: $--background-color-base !default;
+$--select-option-height: 28px !default;
+$--select-option-hover-background: $--color-primary-background-plain-hover !default;
 /// color||Color|0
-$--select-option-selected-font-color: $--color-primary !default;
+$--select-option-selected-font-color: $--color-primary-text-plain !default;
 $--select-option-selected-hover: $--background-color-base !default;
 
 $--select-group-color: $--color-info !default;
 $--select-group-height: 30px !default;
-$--select-group-font-size: 12px !default;
+$--select-group-font-size: 14px !default;
 
 $--select-dropdown-background: $--color-white !default;
 $--select-dropdown-shadow: $--box-shadow-light !default;
 $--select-dropdown-empty-color: #999 !default;
 /// height||Other|4
 $--select-dropdown-max-height: 274px !default;
-$--select-dropdown-padding: 6px 0 !default;
-$--select-dropdown-empty-padding: 10px 0 !default;
-$--select-dropdown-border: solid 1px $--border-color-light !default;
+$--select-dropdown-padding: 4px 0 !default;
+$--select-dropdown-empty-padding: 4px 0 !default;
+$--select-dropdown-border: solid 1px $--input-border-color-hover !default;
 
 /* Alert
 -------------------------- */
@@ -859,7 +859,7 @@ $--popover-background-color: $--color-white !default;
 $--popover-font-size: $--font-size-base !default;
 /// color||Color|0
 $--popover-border-color: $--border-color-lighter !default;
-$--popover-arrow-size: 6px !default;
+$--popover-arrow-size: 4px !default;
 /// padding||Spacing|3
 $--popover-padding: 12px !default;
 $--popover-padding-large: 18px 20px !default;

node_module/element-theme-chalk/src/option-group.scss

@@ -2,7 +2,7 @@
 @import "common/var";
 
 @include b(select-group) {
-  $gap: 20px;
+  $gap: 8px;
 
   margin: 0;
   padding: 0;

node_module/element-theme-chalk/src/option.scss

@@ -4,7 +4,7 @@
 @include b(select-dropdown) {
   @include e(item) {
     font-size: $--select-font-size;
-    padding: 0 20px;
+    padding: 0 8px;
     position: relative;
     white-space: nowrap;
     overflow: hidden;
@@ -26,11 +26,12 @@
 
     &.hover, &:hover {
       background-color: $--select-option-hover-background;
+      color: $--color-primary-hover;
     }
 
     &.selected {
+      background-color: $--background-select-checked;
       color: $--select-option-selected-font-color;
-      font-weight: bold;
     }
   }
 }

node_module/element-theme-chalk/src/popper.scss

@@ -2,8 +2,7 @@
 @import "common/var";
 
 @include b(popper) {
-  .popper__arrow,
-  .popper__arrow::after {
+  .popper__arrow {
     position: absolute;
     display: block;
     width: 0;
@@ -12,18 +11,9 @@
     border-style: solid;
   }
 
-  .popper__arrow {
-    border-width: $--popover-arrow-size;
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
-  }
-
-  .popper__arrow::after {
-    content: " ";
-    border-width: $--popover-arrow-size;
-  }
 
   &[x-placement^="top"] {
-    margin-bottom: #{$--popover-arrow-size + 6};
+    margin-bottom: $--popover-arrow-size;
   }
 
   &[x-placement^="top"] .popper__arrow {
@@ -42,7 +32,7 @@
   }
 
   &[x-placement^="bottom"] {
-    margin-top: #{$--popover-arrow-size + 6};
+    margin-top: $--popover-arrow-size;
   }
 
   &[x-placement^="bottom"] .popper__arrow {
@@ -61,7 +51,7 @@
   }
 
   &[x-placement^="right"] {
-    margin-left: #{$--popover-arrow-size + 6};
+    margin-left: $--popover-arrow-size;
   }
 
   &[x-placement^="right"] .popper__arrow {
@@ -80,7 +70,7 @@
   }
 
   &[x-placement^="left"] {
-    margin-right: #{$--popover-arrow-size + 6};
+    margin-right: $--popover-arrow-size;
   }
 
   &[x-placement^="left"] .popper__arrow {

node_module/element-theme-chalk/src/select-dropdown.scss

@@ -10,15 +10,16 @@
   background-color: $--select-dropdown-background;
   box-shadow: $--select-dropdown-shadow;
   box-sizing: border-box;
-  margin: 5px 0;
+  margin: 4px 0;
 
   @include when(multiple) {
     & .el-select-dropdown__item.selected {
       color: $--select-option-selected-font-color;
-      background-color: $--select-dropdown-background;
+      background-color: $--background-select-checked;
 
       &.hover {
         background-color: $--select-option-hover-background;
+        color: $--color-primary-hover;
       }
 
       &::after {