diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 1d1d7f66e..1c4a817dc 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -76,7 +76,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -122,7 +122,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -141,7 +141,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -168,7 +168,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -197,7 +197,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content van-tabs__content--animated">
@@ -226,7 +226,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
-          <div class="van-tabs__line"></div>
+          <div class="van-tabs__line" style="background-color:undefined;"></div>
         </div>
       </div>
       <div class="van-tabs__content">
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index 5058f4600..ca431e504 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -4,7 +4,7 @@ exports[`change tabs data 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -28,7 +28,7 @@ exports[`change tabs data 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">
           title1
         </span></div>
@@ -61,7 +61,7 @@ exports[`click to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68); transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">
           title1
         </span></div>
@@ -92,7 +92,7 @@ exports[`click to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68); transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
       <div class="van-tab"><span class="van-ellipsis">
           title1
         </span></div>
@@ -123,7 +123,7 @@ exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68); transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">
           title1
         </span></div>
@@ -154,7 +154,7 @@ exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68); transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
       <div class="van-tab"><span class="van-ellipsis">
           title1
         </span></div>
@@ -185,7 +185,7 @@ exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68); transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
       <div class="van-tab"><span class="van-ellipsis">
           title1
         </span></div>
@@ -216,7 +216,7 @@ exports[`swipe to switch tab 4`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
-      <div class="van-tabs__line" style="width: 2px; background-color: rgb(255, 68, 68); transform: translateX(-1px);"></div>
+      <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
       <div class="van-tab van-tab--active"><span class="van-ellipsis">
           title1
         </span></div>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 547ba2f4e..3bdc3a94d 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -108,7 +108,9 @@ export default create({
       tabs: [],
       position: '',
       curActive: null,
-      lineStyle: {},
+      lineStyle: {
+        backgroundColor: this.color
+      },
       events: {
         resize: false,
         sticky: false,