Skip to Main Content

Java SE (Java Platform, Standard Edition)

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Styling Tabpane (css)

drenda81Mar 25 2014 — edited Mar 26 2014

Hi,

I'm customizing my tab-pane with css.

.tab-pane > .tab-header-area > .headers-region > .tab:top {

    -fx-border-color: #a3a7a8;

    -fx-border-radius: 5 5 0 0;

    -fx-background-color: white;

    -fx-pref-height: 40px; 

    -fx-background-insets: 0;

}

.tab-pane > .tab-header-area > .headers-region > .tab:selected:top {

    -fx-border-color: #2381E9 #a3a7a8 #a3a7a8 #a3a7a8;

    -fx-border-width: 5 1 1 1;  

    -fx-border-radius: 5 5 0 0;

    -fx-background-color: white;

    -fx-pref-height: 40px; 

    -fx-background-insets: 0;

}

.tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-label {

    -fx-alignment: CENTER;

    -fx-text-fill: #2381E9;

    -fx-font-weight: bold;

}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {

    -fx-alignment: CENTER;

    -fx-text-fill: #2381E9;

    -fx-font-weight: bold;

}

.tab-pane > .tab-header-area > .tab-header-background {

    -fx-background-color:white;

    -fx-border-color: #a3a7a8;

    -fx-border-width: 0 0 1 0;

    -fx-background-insets: 0;

    -fx-pref-height: 45px; 

}

The result is quite nice (see the image). I'd like to know if is possibile to avoid that the blue border (when the tab is selected) can stop before start the radius of the tab.

Furthermore, which is the correct selector to use to introduce some distance between tabs? I can't figure out how to do this.

http://snag.gy/hwyt4.jpg

Thanks very much   

This post has been answered by David Grieve-Oracle on Mar 26 2014
Jump to Answer
Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Apr 23 2014
Added on Mar 25 2014
2 comments
9,656 views