Как я могу использовать элемент select без стиля на странице с Materialise?

Question

У меня есть страница (ASP .NET / C#) с Materialise, и все работает нормально. Мне нужно добавить выпадающий элемент управления со списком, который НЕ разрабатывается с помощью Materialise, я просто хочу простой, ванильный комбобокс без стилизации. Использование класса «browser-default» все еще имеет много примененных к нему элементов стилей материализации. Есть ли способ полностью игнорировать любой стиль от материализации на компоненте.

<select id="myBareComponent" class="browser-default">
  <option value="One">One</option>
  <option value="Two">Two</option>
</select>

Answer 1

Это, безусловно, неуклюжий подход к CSS со стороны команды Материализации. Возможно, вам придется выполнить некоторые настройки сброса для класса .browser-default:

select.browser-default {
    background-color: initial;
    width: auto;
    padding: unset;
    border: none;
    border-radius: 0;
    height: auto;
}

Answer 2

Вы можете попытаться использовать JavaScript до , чтобы получить вычисленный стиль элемента , а затем выполнить итерацию по вычисленному стилю, чтобы удалить все стили. Не уверен, если это нарушает элемент, хотя! Вы также можете отфильтровать отдельные атрибуты стиля, если вам это необходимо:

const select = document.querySelector('#myBareComponent')
for (const attribute in window.getComputedStyle(select)) {
  switch (attribute) {
    case 'display':
      select.style['display'] = 'none' // select.style['display'] == select.style.display
      break
    default:
      select.style[attribute] = ''
      break
  }
}