Style the Label of a vaadin-text-field

Flow
1

Hi,

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.
setPassiveTouchGestures(true);

// Set Polymer's root path to the same value we passed to our service worker
// in `index.html`.
setRootPath(MyAppGlobals.rootPath);

class DemoApp extends PolymerElement {
  static get template() {
    return html`
      <style>
	
        :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;
        }

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

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

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