JavaFX Scrollbar intersection's color in WebView

Question

Whenever a WebView has to display both the vertical and horizontal scrollbar, there is a small white square at the intersection of the two scrollbars.

I would like to change the colour of this square.

What I have tried so far

I first tried modifying the background colour of the WebView, the Scene, the JavaFX scrollbars. But apparently:

WebView are not your JavaFX UI control, but a part of the displayed webpage.

(see this post)

So from the information found in this thread I tried modifying the background colour of the following elements:

• ::-webkit-scrollbar
• ::-webkit-scrollbar-track
• body
• html
• and even div to see what I get

Anyone has any idea of how I could change the colour of this white square?

You can find the code I used below.

Code

Main.java

package sample;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("WebView.fxml"));
        primaryStage.setTitle("Hello World");
        primaryStage.setScene(new Scene(root, 300, 275));
        primaryStage.show();
    }


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

WebView.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.*?>
<?import javafx.scene.web.WebView?>
<AnchorPane
        fx:controller="sample.Controller"
        stylesheets="@WebView.css"
        prefHeight="400.0"
        prefWidth="600.0"
        xmlns="http://javafx.com/javafx/8"  xmlns:fx="http://javafx.com/fxml/1">
   <children>
            <WebView fx:id="webView"  prefHeight="400.0" prefWidth="600.0"
                     AnchorPane.bottomAnchor="0.0"
                     AnchorPane.leftAnchor="0.0"
                     AnchorPane.rightAnchor="0.0"
                     AnchorPane.topAnchor="0.0"/>
   </children>
</AnchorPane>

Controller.java

package sample;

import javafx.fxml.FXML;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class Controller {

    @FXML
    public WebView webView;

    @FXML
    private void initialize(){
        WebEngine engine = webView.getEngine();
        engine.load("http://www.bing.com");
        engine.setUserStyleSheetLocation(getClass().getClassLoader().getResource("sample/UserStyleSheet.css").toExternalForm());
    }
}

Answer 1

It's been almost a year now but for anyone that needs to know how to achieve this it can be done with this

.corner {
    -fx-background-color: transparent;
}

You can also use this link for more details on stylizing scrollbars: http://www.guigarage.com/2015/11/styling-a-javafx-scrollbar/