Question

我正在尝试设置实现css创建的选择框的输入字段。我正在使用angular 2 materialize指令。这就是我的html的样子：

<div class="input-field col s12">
  <select id="property-selector" materialize="material_select" name="propertySelector">
    <option class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option>
  </select>
</div>

这就是scss的样子：

#property-selector-card {
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #118073;
  font-size: 17pt;
  div.select-wrapper {
    .select-wrapper input.select-dropdown {
      border-bottom: none !important;
    }
  }
}

这会在浏览器中生成以下html：

<div _ngcontent-kld-6="" class="card-panel row" id="property-selector-card">
  <div _ngcontent-kld-6="" class="input-field col s12">
    <div class="select-wrapper initialized"><span class="caret">▼</span>
      <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-95a42e27-1c84-d800-0534-aaaaeb70c462" value="Address 1, 1000AA Amsterdam, The Netherlands"><ul id="select-options-95a42e27-1c84-d800-0534-aaaaeb70c462" class="dropdown-content select-dropdown "><li class=""><span>Address 1, 1000AA Amsterdam, The Netherlands</span></li></ul>
      <select _ngcontent-kld-6="" id="property-selector" materialize="material_select" name="propertySelector" ng-reflect-materialize="material_select" class="initialized"
        <option _ngcontent-kld-6="" class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option>
      </select></div>
  </div>
</div>

现在，我遇到了覆盖边框底部样式（我不想要）的问题。我在scss中使用的选择器似乎没有响应。

我已经能够通过在父元素上设置它来调整字体，但是我遇到了实现js生成的select-wrapper元素，我使用的css选择器也被覆盖了。

知道如何有效地设置输入元素的样式吗？

Answer 1

我有同样的问题。在我的情况下，我试图在component.style.css文件中添加样式并且它没有任何效果，然后我尝试将它添加到主 style.css 并且它起作用。< / p>

我认为在您的情况下，不使用id，而是使用类名遍历并设置样式。

.custom-select {
  div.select-wrapper {
    .select-wrapper input.select-dropdown {
      border-bottom: none !important;
    }
  }
}

并将classname赋予select元素

的最外层div

<div class="input-field col s12 custom-select">
  <select id="property-selector" materialize="material_select" name="propertySelector">
    <option class="property-option">Address 1, 1000AA Amsterdam, The Netherlands</option>
  </select>
</div>

样式实体化使用angular 2 materialize指令中的materialize进行选择

1 个答案: