NON-Editable field - influence color

For users with read-only-access i tried to set the fields of my form to editable,
but unfortunately the grey that is displayed then, is so light that’s it’s hard to read te text.

Is it possible to change the color of NON-editable fields ?

Ideally the text should still be in black, only not editable by the user.

I guess you used setEnabled(false);? If yes, the fields get the css selector .v-disabled. You can override the style in your theme to make it look the way you want it.

Use setReadOnly(true) instead of seEnabled(false)

setReadOnly() seems to be the simpler way but when i try that,
i get a ReadOnlyException error because of a programmed setValue(), that occurs later on.

However the API-description says that setReadOnly() only affects user input, not programmed changes via setValue().
This seems a bit incoherent to me.

Surrounding setValue() by setReadOnly( false) and setReadOnly( true ) is not very elegant, but it helped.

Unfortunately in read-only-mode, only the textfield content is displayed, the borders of the field disappear,
which makes the screen look a bit ‘loosely’ arranged.

Maybe i’ll give the setEnabled() / CSS approach a try.

Sorry Jouni, Jens suggestion made it.

I overrode .v-disabled like this

opacity: 1;

…and got exactly what i wanted.

Thanks, guys

Yes, that is a good solution as well, but do note that that selector is global and affects all disabled elements now. So if you disable a button now somewhere else in the application it will not look disabled.

Is it not possible to narrow down the modifications by doing something like this:

.v-textfield .v-disabled {
opacity: 1;


Sure it is possible, but your selector is slightly off (remove the space from between the class selectors):

.v-textfield.v-disabled {
   opacity: 1;

Note, though, that this will still target all disabled component’s in IE6, because it doesn’t support the joined class selector, but only targets the last specified class selector (v-disabled in this case).