2 Replies Latest reply: Apr 15, 2012 12:55 PM by 930593 RSS

    Removing the border and focus indicators from text controls

    930593
      With TextField and TextArea, is it possible to "hide/disable" the focus indicator so that a focussed field looks identical to a non-focussed field? I am guessing it can be accomplished using CSS right? I would also like to make the border of the fields hidden as well so that all that appears is the text.

      Is this possible? How?

      Thanks,

      -Luc
        • 1. Re: Removing the border and focus indicators from text controls
          shakir.gusaroff
          A focused TextField’s css is defined in caspian.css as follows:
                 .text-field:focused {
              -fx-background-color: -fx-focus-color, -fx-text-box-border, -         
               fx-control-inner-background;
              -fx-background-insets: -0.4, 1, 2;
              -fx-background-radius: 3.4, 2, 2;
          }
          Create your own custom css and define TextField’s css as follows:
                    .text-field  {
              -fx-background-color: -fx-focus-color, -fx-text-box-border, -         
               fx-control-inner-background;
              -fx-background-insets: -0.4, 1, 2;
              -fx-background-radius: 3.4, 2, 2;
          }
          In this case, focused and unfocused fields will be identical.
          You can also remove TextField’s border in your css file.
                  .text-field {
              -fx-background-color: silver;
              -fx-background-insets: -0.4, 1, 2;
              -fx-background-radius: 3.4, 2, 2;
          }
          • 2. Re: Removing the border and focus indicators from text controls
            930593
            Thanks very much for that Shakir. It works nicely.

            -Luc