QInput customization

q-input.scss

.myinput {
  border-radius: 8px;
  background: #f00;
  
  // border
  :deep(.q-field__inner) {
    border-radius: inherit;

    .q-field__control {
      border-radius: inherit;

      &:before {
        border: 2px solid #000;
      }

      &:after {
        border: none;
      }
    }
  }
  
  // text color
  :deep(input) {
    color: #ccc;

    ::placeholder {
      color: #ccc;
    }
  }
  
  
  // use 'nude' classe to make input nude
  &.nude {
    padding: 0;
    :deep(.q-field__control) {
      padding: 0;
      height: auto;
      &:before {
        border: none !important;
      }

      input {
        padding: 0;
      }

      textarea {
        padding-top: 0;
      }
    }
  }
  
  
  // change hover color and remove box shadow
  &:hover,
  &:focus {
    :deep(.q-field__control:before) {
      border-color: #0f0;
    }

    box-shadow: none;
  }
}