Applying styles to input fields

[jimthouston]

I'm trying to overlay input fields over a PDF tax form. I'm trying to make the digits align with boxes on the form. I tried:

ui.input.default_style('font-size: 30px; letter-spacing: 10px')

This let me set the font-size but the letter-spacing had no effect. I played with chrome dev-tools and found a letter-spacing: 0.00937em; when I inspected the input field. This is hard-coded in nicegui/static/quasar.css. I was able to override this with:

ui.add_body_html('''
    <style>
        .q-field__native, .q-field__prefix, .q-field__suffix, .q-field__input {
            letter-spacing: inherit;
        }
    </style>''')

This lets me set the spacing on a field by field basis by calling ui.input.default_style with the desired style before adding the input field.

I'm using something similar to make number fields right aligned:

ui.add_body_html('''
    <style>
        .q-field__native[type=number] {
            text-align: right;
        }
    </style>''')

I had hoped that I could do this on a field by field basis but it seems to be all or nothing.

I also hope to disable the increment/decrement arrows. I think this helps a bit but I don't understand why:

ui.add_body_html('''
    <style>
        input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>''')

I'm also having problems with single character fields which scroll the letter out of the field to display the cursor. I'm working around this by allowing extra space for the cursor but this leads to overlapping input fields.

Any suggestion appreciated.

Jim

[falkoschindler]

There are multiple ways to change the style of input elements:

1. Custom CSS like you did, but with an extra custom class to narrow it down:

   ui.add_body_html('''
       <style>
           .my-number .q-field__native[type=number] {
               text-align: right;
           }
       </style>
   ''')
   
   ui.number('Number', value=123, step=0.1, min=0, max=100).classes('my-number')

2. Using Quasar's "input-style" prop:

   ui.number('Number', value=123, step=0.1, min=0, max=100).props('input-style="text-align: right"')

3. Deriving a custom element:

   class right_number(ui.number):
       def __init__(self, *args, **kwargs):
           super().__init__(*args, **kwargs)
           self.props('input-style="text-align: right"')
   
   right_number('Number', value=123, step=0.1, min=0, max=100)