Style the Label of a vaadin-text-field


How do you style the label part of a Vaadin Text Field. If I want to change the font-size for example?

I have created a new polymer 3 component using the starter kit and want to use a vaadin-text-field in it. I set the class to be “reference-field” and tried to create some CSS for that but it doesn’t work.

I was able to specify a class for vaadin-button and it picked up the styling but I cannot do the same for vaadin-text-field.

I’d be grateful for any pointers or suggestions.

This is my demo-app.js file.

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { setPassiveTouchGestures, setRootPath } from '@polymer/polymer/lib/utils/settings.js';
import '@vaadin/vaadin-lumo-styles';
import '@vaadin/vaadin-button';
import '@vaadin/vaadin-text-field';
// Gesture events like tap and track generated from touch will not be
// preventable, allowing for better scrolling performance.

// Set Polymer's root path to the same value we passed to our service worker
// in `index.html`.

class DemoApp extends PolymerElement {
  static get template() {
    return html`
        :host {
          display: block;

        .button-style {
            background: url("demo-app/images/stripe-sm.png") no-repeat scroll 0 0 transparent;
            border: none;
            padding: 5px;
   	        width: 120px;
            height: 60px;

	        font-size: large;	
            <vaadin-text-field class="reference-field" value = "[[referenceNo]
]" label="Reference Number" placeholder="Reference" readonly></vaadin-text-field> 
           <div class="button-layout">
             <vaadin-button class="button-style" id="ButtonId" on-click="_onClick">

  static get properties() {
    return {
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged'
      routeData: Object,
      subroute: Object

window.customElements.define('demo-app', DemoApp);