How to change text color and height of <input> in <q-input>?

DamienDeville

Noob here trying to apply some CSS to the <input> element inside a
<q-input> element.

By adding:

<style lang="stylus" scoped>
input
  text-align right
  height 32px
  color purple
</style>

to the element containing the <q-input> element, I manage to move the entered input text to the right. But it does not alter neither the color of the input value nor the height of the input field to accommodate for the large font size inherited from the parent component without cropping it.

What I am doing wrong?

And also what is this sp unit used in the typography section of the Quasar doc? I don’t find it the w3school CSS reference

DamienDeville

@damiendeville Partial self-answer here. I almost managed to customize the q-input component styling to my local needs with the following code:

<style lang="stylus">
.q-input
  height 2.5em

.q-if-label
  text-align right
  color orangeRed

input[type="number"]
  height 1em
  color purple
  text-align right 
</style>

However, I still do not understand why I needed to add the [type=“number”] to the input selector to access the input element inside the q-input element.

But this code is not really legible, since neither the q-if-label component nor the input elements encapsulated in the q-input element appear in the vue template that this stylus code is styling. Is there any way to customize the appearance of a quasar component other than selecting in stylus sub-components and sub-elements internal to the component hence in effect breaking its encapsulation and making the code incomprehensible without inspecting the component 's internal DOM with a browser debugger?

Also, I tried to add an ellipsis to the placeholder and the following code just didn’t have any effect:

input[placeholder]
  text-overflow ellipsis

Any suggestion on this one?

Lou Rectoret

I’ve found the solution, and this works for every css class with Quasar:
1- Discover “what class to rewrite”
2- app.styl:

// Q-INPUT
.q-input-target, .q-input-shadow
  color $brown-base

muzammil_76

In latest version of quasar nothing of the above style is working to change the height of quasar select box (q-input) can someone plz suggest a proper way to change the height of input field in quasar

dobbel

@muzammil_76

Here is a raw solution. It could be better targeted in css I guess. Might give you some idea’s to find a ‘real’ solution.

I overruled the dense property to change the height from 40 to 30.

https://github.com/quasarframework/quasar/blob/dev/ui/src/components/field/QField.sass

.q-field
  &--dense
    .q-field__control, .q-field__marginal
      height: 30px !important
          // .q-field__bottom
      
          //   font-size: 10px  
      
          // .q-field__label
      
          //   font-size: 11px
      
          //   top: 10px
      
          // .q-field__before, .q-field__prepend
      
          //   padding-right: 6px
      
          // .q-field__after, .q-field__append
      
          //   padding-left: 6px
      
          // .q-field__append + .q-field__append
      
          //   padding-left: 2px

muzammil_76

@dobbel thanks, this is working great. Can u plz also tell me how to apply same styling to q-select as this css is not working for q-select input.

dobbel

@muzammil_76

I tried but sorry could not do it (i am not a css master).

No More Posting New Topics!

How to change text color and height of <input> in <q-input>?