javafx常用控件css样式修改记录

状态信息

首先来了解一下控件各种常见状态下的表示方法：

• :selected：被选中状态，比如RadioButton。
• :editable：可编辑状态，比如TextField。
• :hover：鼠标悬停状态，鼠标位于该控件区域时的状态。
• :pressed：按压状态，一般表示该控件被点击按下时的状态。
• :focused：有焦点的状态。
• :row-selection：行选中状态，比如TableView行被选中。
• :cell-selection：单元格选中状态。
• :vertical：垂直，比如ScrollBar。
• :horizontal：水平，比如ScrollBar。
• :top：顶部，比如TabPane的tab，可以在上下左右四个方向。
• :left：左边。
• :right：右边。
• :bottom：底部。
• :collapsed：收缩状态。
• :expanded：展开状态。
• :default：默认状态。可不写。
• :disabled：不可用状态，比如按钮的不可点击状态等。
• :empty：空状态。比如LiveView的item数据为空时。
• :odd：奇数行，比如ListView的1、3、5行。
  下面是一些我暂时未使用过的状态值，以后再慢慢补充：
• :even：
• :filled：
• :armed：
• :cancel：
• :determinate：
• :fitToHeight：
• :fitToWidth：
• :indeterminate：
• :indetermindate：
• :openvertically：
• :pannable：
• :readonly：
• :show-mnemonic：
• :showing：
• :visited：

ScrollBar

scroll_bar.png

.list-view .scroll-bar:vertical{
    -fx-background-color: #8646ee;
    -fx-background-radius: 10;
}

.list-view .scroll-bar:vertical .track{
    -fx-background-color: transparent;
}

.list-view .scroll-bar:vertical .thumb{
    -fx-background-color: #4c06c1;
}

.list-view .increment-button{
    -fx-background-color: transparent;
}

.list-view .increment-arrow{
    -fx-background-color: white;
}

.list-view .decrement-button{
    -fx-background-color: transparent;
}

.list-view .decrement-arrow{
    -fx-background-color: white;
}

效果图：

scroll_bar.png

TableView

/*表格头部背景*/
.table-view .column-header-background{
    -fx-background-image: url("/resource/img/competition_table_title_bg.png");
    -fx-background-size: stretch;
}

/*表格内容区域*/
.table-view .placeholder{
    -fx-background-color: transparent;
}

/*表格列*/
.table-column{
    -fx-background-color: transparent;
    -fx-alignment: center;
}

/*表格内容区域每行的样式*/
.table-row-cell{
    -fx-pref-height: 35;
    -fx-background-color: #befafa;
}
.table-row-cell:odd{
    -fx-background-color: #beecfb;
}
.table-row-cell .text{
    -fx-fill: #1c91c5;
    -fx-font-family: "FZCuYuan-M03S";
    -fx-font-size: 10pt;
}

效果图：

table_view.png