如何在layout = row中删除下划线i md-chips

Kas*_*ard 1 angularjs angular-material

如何摆脱md-chips中的下划线 - 131,132和T下的线?

<div layout="row">
  <div flex>
    <md-chips ng-model="condition.list" readonly="true" md-removable="false">
      <md-chip-template>
        <span>{{$chip.id}}</span>
      </md-chip-template>                  
    </md-chips>
  </div>
 </div>
Run Code Online (Sandbox Code Playgroud)

看起来像这样 在此输入图像描述

Nag*_*wda 7

下划线因为<md-chips>添加边框底部.您可以通过如下设置删除该行

.md-chips{
  box-shadow: 0 0px !important;
}
Run Code Online (Sandbox Code Playgroud)

var app = angular.module("app", ['ngMaterial']);
app.controller("myCtrl", function($scope) {});
Run Code Online (Sandbox Code Playgroud)
.md-chips{
  box-shadow: 0 0px !important;
}
Run Code Online (Sandbox Code Playgroud)
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-aria.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" rel="stylesheet" />
<div layout="row" ng-app="app" ng-controller="myCtrl">
  <div flex>
    <md-chips>
      <md-chip-template>
        <span>{{chip.id}}</span>
      </md-chip-template>
    </md-chips>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)