Java SE (Java Platform, Standard Edition)

I created a custom text field which has a background image. The basic setup is that I use the TextField on top of the ImageView, with the appropriate style setting.

However as soon as I click into the input field, the background is lost and I get the default style of the text field (light blue border with white background)

This is how it looks initially, and this after clicking into it.

This is the CSS definition:

.openPatricianWoodenTextInput {
    -fx-font-family: WeekdaysRomanSlant;
    -fx-font-size: 24px;
    -fx-background-color: rgba(0,0,0,0);
    -fx-highlight-fill: rgba(0,0,0, 0);
    -fx-highlight-text-fill: rgba(255, 255, 255, 0);
    -fx-text-fill: rgba(0,0,0, 1);
    -fx-prompt-text-fill: rgba(255, 255, 255, 0);
}

This is the setup in the Skin:

currentFont = new SimpleObjectProperty<Font>(this, "currentFont", input.getFont());
Dimension2D dim = sizing.calculate(input.getSize(), currentFont.get());
width.set(dim.getWidth());
height.set(dim.getHeight());

final TextField textField = new TextField(input.getText());
textField.textProperty().bindBidirectional(input.textProperty());
textField.getStyleClass().add("openPatricianWoodenTextInput");
textField.setMaxSize(width.doubleValue(), height.doubleValue());

final InputStream is = getClass().getResourceAsStream("InputPlank.jpg");
Image img = new Image(is,width.doubleValue(), height.doubleValue(), false, true);
final ImageView imgView = new ImageView(img);

// Listeners
input.sizeProperty().addListener(new ChangeListener<Number>() {

    @Override
    public void changed(ObservableValue<? extends Number> observable,
            Number oldValue, Number newValue) {
        Dimension2D dim = sizing.calculate((Integer)newValue, currentFont.get());
        width.set(dim.getWidth());
        textField.setMaxSize(width.doubleValue(), height.doubleValue());
        Image img = new Image(is,width.doubleValue(), height.doubleValue(), false, true);
        imgView.setImage(img);
    }
});


StackPane stack = new StackPane();
stack.getChildren().addAll(imgView, textField);
Group group = new Group(stack);
group.setManaged(false);

getChildren().add(group);

The whole example application can be downloaded as NetBeans project based on JDK 8.

As I understand I could also use a HTMLEditor, however that seems like a bit of an overkill. Besides the HTMLEditor is not that well documented. Are there other potential solutions, I'm not aware of?