Блог

Я пытаюсь стилизовать поле ввода поля выбора, которое создает materialize 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>
  

Теперь у меня возникают проблемы с переопределением стиля border-bottom (который мне не нужен). Селектор, который я использую в scss, похоже, не отвечает.

Я смог настроить шрифт, установив его в родительском элементе, но я застрял с элементом select-wrapper, который генерирует materialize js, и, похоже, используемый мной селектор css также переопределяется.

Есть идеи, как эффективно стилизовать элемент ввода?

У меня была такая же проблема. В моем случае я пытался добавить стиль в файл component.style.css, и это не дало никакого эффекта, затем я попытался добавить его в main style.css, и это сработало.

Я думаю, что в вашем случае вместо использования id используйте имя класса для обхода и установки стиля.

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

и присвоите имя класса самому внешнему div элемента select

 <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>