How to remove innser shadow in Text field

Question

I want to remove the inner shadow in TextField.

Here is css.

-fx-font-size: 12px;
-fx-font-family: "Segoe UI Semibold";
-fx-pref-width:250px;
-fx-pref-height:35px;
-fx-background-radius:0px;

Have you tried other solutions? The questions might be a duplicate. http://stackoverflow.com/questions/12791631/remove-inner-shadow-of-text-input — profimedica, Jul 29 '16 at 14:24

score 1 · Accepted Answer · answered Jul 29 '16 at 14:14

1

Try adding this line:

-fx-background-color: -fx-text-box-border, -fx-control-inner-background;

answered Jul 29 '16 at 14:14

Andrey M

400
1
16

From where you learn these tricks? I really want to be professional in Java, JavaFX, Java EE. now working in JavaFX.. can you give me reference from where I can be professional in JavaFX? mean want to learn everything related to JavaFX can you give me reference Please? – Asif Mushtaq Jul 29 '16 at 14:30
@UnKnown I just compiled [cssGuide](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html), [caspian](https://gist.github.com/bionicrm/c90c03c645d18722ddb0), [modena](https://gist.github.com/maxd/63691840fc372f22f470). – Andrey M Jul 29 '16 at 14:42
amazing links..!! Are these links would be enough to be professional in JavaFX CSS? if you have more links ( which describes details too ) please give me. – Asif Mushtaq Jul 29 '16 at 14:45
@UnKnown + [pseudoClass](http://harmoniccode.blogspot.ru/2013/05/css-confusing-style-sheets.html), [cssUtilities](http://www.guigarage.com/2014/03/javafx-css-utilities/) and much more in google :) – Andrey M Jul 29 '16 at 14:55
Really I'm learning day and night. But I stuck when I have nothing to read or unable to find the exact source. You are great. These will be helpful for me. – Asif Mushtaq Jul 29 '16 at 15:26

Muhammed Bera Koç · Answer 2 · 2019-02-09T08:53:43.170

The problem is that it is NOT shadow. It is a specially decorated background. So making it transparent or putting a key which its value is transparent will work well.

.text-field {
    -fx-text-box-border: transparent;
    -fx-background-color: transparent;
 }

 .text-field:focused {
     -fx-faint-focus-color: transparent; /*JavaFX 8*/
     -fx-focus-color: transparent; /*JavaFX 2.2*/
 }

The style code above(style.css) will generate a text field without any border and background and make it clear. By the way putting -fx-border-color or -fx-faint-color instead of transparent in -fx-background-color is completely fine since their value is transparent.

Edit: I'm adding now a little example code.

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;
import javafx.scene.layout.Pane;

public class TextFieldDemo extends Application {

    public void start(Stage primaryStage) {
        TextField textField = new TextField();
        textField.setPromptText("TextField");
        textField.setMaxWidth(100);
        textField.setLayoutX(50);
        textField.setLayoutY(25);
        textField.setFocusTraversable(false);
        Rectangle background = new Rectangle(40, 20, 120, 40);
        background.setStyle("-fx-arc-width: 40px; -fx-arc-height: 40px;-fx-fill: yellow;");
        Scene scene = new Scene(new Pane(background, textField), 200, 80);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Example Output: Example Image

How to remove innser shadow in Text field

2 Answers2