@Zol This was extremely helpful. Thank you!

I was wondering if somebody could help me out. I want to align two divs in a row in reverse order if the screen width is greater than 999px and a column in regular order if the screen is equal to or less than 999px. I have an example of it working with POCSS but was wondering if this was possible with quasar?

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
  .item {
    border: 1px solid #9c0000;
    height: 100px;
    width: 100%;
    line-height: 100px;
    text-align: center;
    font-family: sans-serif;
    font-size: 60px;
  }
}

@media (max-width: 999px) {
  .container {
    flex-direction: column;
  }
}

@rubs @Hawkeye64 @dobbel Any luck with this. I am having the same issue.

I agree, an official fix for this would be great. I too wanted to keep autocomplete enabled and not have Chrome break the UI. Here is how I did it.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: $textColor;
  -webkit-box-shadow: 0 0 0 1000px $backgroundColor inset !important;
  transition: background-color 300ms ease-in-out 0s;
}
.q-field--outlined .q-field__control:before {
  z-index: 1;
}