重新设计 md-select 容器

Question

嗨

重新设计 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;
}

重新设计 md-select 容器

Redesign md-select Container

css

angularjs

angular-material