Customize disabled TextField style

General
21

I tried to treat this problem with css, to no avail - seems that with IE it’s not really possible to override this styling for ‘disabled’ input fields. Finally, I’ve written custom Field (using CustomField addon) that overrides ‘setEnabled’ and switches the TextField to Label when ‘setEnabled(false)’ is called. Sth like:

public class CustomTextField extends CustomField {

	// shown when not 'disabled'
	private TextField editableField;
	// shown when 'disabled'
	private Label displayedWhenDisabledField;
	private VerticalLayout rootLayout = new VerticalLayout();

    (...)
   CustomTextField() { 
     rootLayout = new VerticalLayout() ;
     super.setCompositionRoot(rootLayout);
      (...)
     }

     @Override
	public void setEnabled(boolean enabled) {
		if (enabled != currentlyEnabled) {
			rootLayout.removeAllComponents();
			if (enabled) {
				rootLayout.addComponent(editableField);
			} else {
				rootLayout.addComponent(displayedWhenDisabledField);
			}
			currentlyEnabled = enabled;
		}
	}
     
   }

Note that you also have to properly handle setValue, getValue … etc.