Changing the style of the "caption" of a TextField vis CSS...

Hi All,

I have this TextField inside a VerticleLayout where I need to access its’ “Caption” property via CSS & change the style (the color & the font-weight).
Any help is greatly appreciated.

Thanks in advance.

Cheers,
Asela.

WIth caption you mean the text that you specify with setCaption(String)? If I recall correctly it is outside the component div itself so you can’t reference it through the component’s style names. what you can do is give your verticallayout a stylename and reference it trough .mylayout .v-caption {color:red} or something like that, but it will change every fields’ caption in that layout. Another option is to just put the caption to empty and add a separate label above the component, give that a stylename and theme it directly.

Hi,

You can adjust individual components’ caption elements by adding a style name to the component as usual, then then using the following syntax in your CSS (the additional style name is appended to the v-caption class name):

// Java
TextField tf = new TextField("Custom caption");
tf.addStyleName("mystyle");

// CSS
.v-caption-mystyle {
   font-weight: bold;
   color: red;
}

Ok , along the lines of the above. What if you wanted to style the caption and make it invisible for a certain reason , then make it visible again when your browser is resized.
I try and use …

.contentLayout[width-range~=“300-850px”]

{
	.v-caption-Tax-Field-Change
	{
		display: none; 
	}
}

But that affects the whole textfield, not just the caption .

any suggestions please ?