javascript - 如何使 AngularJS Materials 下拉菜单更加可见？

Question

我在玩 AngularJS Materials 并使用 and .我意识到对于某些人来说可能真的很难阅读，因为文本太浅了，我想在不更改背景的情况下使其可见。

我设法在 css 中制作了纯文本的颜色:

    md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder{
  color: black;
}

我不一定需要让它变暗，但我想知道是否有任何方法可以使 AngularJS Materials 的下拉菜单更加可见？

Answer 1

您可以通过覆盖 md-menu-item 来更改文本颜色。这将需要一些麻烦，因为您可能需要 !important 某些类来覆盖 Material 设计。

md-menu-content.md-default-theme md-menu-item, md-menu-content md-menu-item {
    color: some color
}

它们是下拉列表中的按钮，因此如果您想那样做，$mdThemeProvider 应该可以更改它们。

只需将类 md-primary、md-accent 或 md-warn 添加到这些 Material 元素之一(md-button在你的情况下): md-button, md-checkbox, md-progress-circular, md-progress-linear, md-radio-button, md-slider, md-switch, md-tabs, md-input-container, md-toolbar

将 md-raised 添加到带有 .md-primary 的按钮会反转颜色效果，因此 .md-primary.md-raised 使背景为蓝色，文本为白色

  <md-menu>
    <md-button ng-class="md-raised" ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
      test menu
    </md-button>
    <md-menu-content>
      <md-menu-item>
        //
        //add md-primary on the button for blue text
        //change $mdThemeProvider if you want the color to be different
        //
        <md-button class="md-primary" ng-click="doSomething()">Do Something</md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

https://material.angularjs.org/latest/Theming/02_declarative_syntax

编辑:md-menu 的工作片段

var app = angular.module('sandbox', ['ngMaterial']);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>

<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>

<div ng-app="sandbox">
  <div layout-margin>
    <div layout="row">
      <md-menu>
        <!-- Trigger element is a md-button with an icon -->
        <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu" class="md-raised">
          test menu
        </md-button>
        <md-menu-content>
          <md-menu-item>
            <md-button class="md-primary" ng-click="doSomething()">Do Something</md-button>
          </md-menu-item>
        </md-menu-content>
      </md-menu>
    </div>
  </div>
</div>

第二次编辑:

OP 实际上是在讨论 md-select 中的标签。

这只能通过 css 操作来改变。

现在，改变似乎是显而易见的选择

md-input-container label {
   some color    
}

然而，angular-materials 实际上将第一个 md-select-value 作为它的标签

<md-input-container class="">
   <label for="select_5" class="md-placeholder">Drop Down Tester</label>
   <md-select ng-model="selectedUser" class="ng-pristine ng-valid ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_5" aria-owns="select_container_6" aria-invalid="false" aria-label="Drop Down Tester">
       <md-select-value class="md-select-value md-select-placeholder" id="select_value_label_0">
          <span>Drop Down Tester</span>
          <span class="md-select-icon" aria-hidden="true"></span>
       </md-select-value>
    </md-select>
 </md-input-container>

如果您想更改 md-select 的占位符，

md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder {
  color: green;
}

这不会更改下划线或覆盖 md-primary 或其他样式，只是具有零操作的占位符。

var app = angular.module('sandbox', ['ngMaterial']);

md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md-select-value.md-select-placeholder {
  color: green;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>

<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>

<body ng-app="sandbox">
  <md-content class="md-padding">
    <md-input-container>
      <label>Drop Down Tester</label>
      <md-select ng-model="selectedUser">
        <md-option>Hello</md-option>
        <md-option>Please Change Color</md-option>
        <md-option>Pls</md-option>
        <md-option>Do it for your mother Mr.Select</md-option>
      </md-select>
    </md-input-container>
  </md-content>
</body>