如何调整 AngularJS 材质选择框的高度？

Question

我有以下代码

<md-input-container style="margin-right: 10px;width: 13%;"  class="ScenarioDetailsDropdown" >
        <h4    class="LabelsPageOne">Geography Type</h4>

        <md-select ng-model="GeographyType" ng-change="SelectGeographyType()" >
          <md-option   ng-repeat="(index,ModelTableRow) in ModelTable | unique:'geographyType'" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option>
        </md-select>

</md-input-container>

如何降低选择框的高度？ 另外，如何减少 md-input-container 中的顶部填充？ 我试过用这个：

<md-input-container style="margin-right: 10px;width: 13%;" class="ScenarioDetailsDropdown" style="padding : 0px 0px !important;margin:0px 0px;" >

但是，它不起作用。 你能帮我做这个吗？ 谢谢！

Answer 1

您必须创建一个自定义指令以支持基于常规<select></select> 元素的此类自定义。不幸的是，Angular Materials md-select 元素不提供任何相关选项。

Answer 2

这是你所追求的吗？ CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" style="padding:100px">
  <md-input-container  class="ScenarioDetailsDropdown" >
    <h4 class="LabelsPageOne">Geography Type</h4>
    <md-select ng-model="GeographyType" ng-change="SelectGeographyType()" md-container-class="mySelect">
      <md-option   ng-repeat="(index,ModelTableRow) in ModelTable" ng-value="ModelTableRow.geographyType" >{{ModelTableRow.geographyType}}</md-option>
    </md-select>
  </md-input-container>
</div>

CSS

.ScenarioDetailsDropdown {
  margin: 0;
  background: green
}

.ScenarioDetailsDropdown h4 {
  margin: 0;
}

.ScenarioDetailsDropdown md-select {
  background: white;
}

.ScenarioDetailsDropdown md-select md-select-value {
  height: 20px;
  min-height: 20px;
}

.mySelect {
  margin-top: 25px;
  margin-left: 20px;
}