重新设计md-select容器

Question

HY

重新设计md-select Window的优雅方式。例如，我想改变背景和悬停效果。

我已经尝试在css中更改.md-select-menu-container，但这没有用。我看到Material在md-select-menu中添加了一个新的Div，它有

style="display: block; left: 593px; top: 70px; min-width: 139.469px; font- size: 12px;"

这就是我想改变的地方。 任何帮助将不胜感激

谢谢！

Answer 1

您可以使用md-container-class进行样式设定 - CodePen

来自docs：

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-margin>
  <md-input-container style="margin:50px">
    <label>Bird</label>
    <md-select ng-model="birdType" md-container-class="mySelect">
      <md-option ng-repeat="bird in birds" value="{{bird}}">{{bird}}</md-option>
    </md-select>
  </md-input-container>
</div>

CSS

.mySelect md-select-menu {
  background: yellow;
  margin-left: 100px;
  margin-top: 50px;
}

.mySelect md-content {
  background: yellow;
}

.mySelect md-option:hover {
  background: pink !important;
}