Change background of the text in a TextBox

Question

(JavaFX 1.3) How can one change the background (color, gradient, whatever) of the text in a TextBox without affecting any of the other display (Skin) attributes for the TextBox?
A related question is: How can I programmatically determine the background (color, gradient, whatever) of the text in a TextBox?
I would like to be able to indicate to the user that the text entered is not valid by changing the background of the text to something other than the original background and change it back to the original background when the text is valid. This would probably be done inside overridden replaceSelection and/or commit functions when extending a TextBox.

Answer 1

This seems to change the background of a button from the caspian style to something else and back to the caspian style, without losing the focus highlight.
// caspianFXBodyColor = definition of -fx-body-color in .scene from caspian.css
def caspianFXBodyColor = "linear (0%,0%) to (0%,100%) stops (0,derive(-fx-color,34%)) (1,derive(-fx-color,-18%))";
def revisedFXBodyColor = "red";
Stage {
  scene: Scene {
    width: 250
    height: 300
    content: Button {
      var isCaspian = true;
      var bodyColor: String = caspianFXBodyColor;
      text: "push me"
      style: bind "-fx-body-color: {bodyColor};"
      action: function() {
        if (isCaspian = not isCaspian) bodyColor = caspianFXBodyColor
        else bodyColor = revisedFXBodyColor;
}However, the original question regarding how to do this for a TextBox remains unanswered. The following code demonstrates that changing the value for -fx-background-color changes the background color as desired, but the focus highlight is lost. Changing the value of -fx-body-color has no visible effect.
// caspianBGColor = definition of -fx-background-color in .text-box{} in caspian.css
def caspianBGColor = "-fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, -fx-control-inner-background;";
def revisedBGColor = "-fx-background-color: -fx-shadow-highlight-color, -fx-text-box-border, red;";
def caspianBodyColor = "-fx-body-color: -fx-control-inner-background;";
def revisedBodyColor = "-fx-body-color: red;";
def box = TextBox { text: "sample text" }
var isCaspianBackground = true;
var isCaspianBody = true;
def button1 = Button {
  text: bind "change {if (isCaspianBackground) 'from' else 'to'} caspian background color"
  action: function() {
    if (isCaspianBackground) box.style = revisedBGColor else box.style = caspianBGColor;
    isCaspianBackground = not isCaspianBackground;
def button2 = Button {
  text: bind "change {if (isCaspianBody) 'from' else 'to'} caspian body color"
  action: function() {
    if (isCaspianBody) box.style = revisedBodyColor else box.style = caspianBodyColor;
    isCaspianBody = not isCaspianBody;
Stage {
  scene: Scene {
    width: 250
    height: 300
    content: [ VBox { content: [ box, button1, button2 ] } ]
}Edited by: timdoodle on Aug 13, 2010 5:25 PM
Code was not displayed correctly. Some text inside braces was not displayed.