如何在sencha touch 2框架中更改选择Field的Done和Cancel按钮的颜色

Question

//您好我正在使用sencha touch 2.0框架。我在我的项目中使用了selectfield，我需要更改完成的颜色和取消选择字段的按钮。但是这些选择器按钮在浏览器中不可见，但出现在Android设备中。那么我该如何为这两个按钮应用颜色。

尽可能提供一些细节和相关帖子

Answer 1

这将覆盖应用中所有取消按钮的样式。 在CSS中包含以下内容，并在sencha的CSS之后包含CSS：

/*Cancel Button styles overriding*/
.x-toolbar-dark .x-button, .x-toolbar-dark .x-button.x-button-back::after, .x-toolbar-dark .x-button.x-button-forward::after, .x-toolbar .x-toolbar-dark .x-button, .x-toolbar .x-toolbar-dark .x-button.x-button-back::after, .x-toolbar .x-toolbar-dark .x-button.x-button-forward::after, .x-toolbar-dark .x-field-select .x-component-outer, .x-toolbar-dark .x-field-select .x-component-outer.x-button-back::after, .x-toolbar-dark .x-field-select .x-component-outer.x-button-forward::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-back::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-forward::after, .x-toolbar-dark .x-field-select .x-component-outer::before, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-back::after, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-forward::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-back::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-forward::after { 
    background-color: #303030;
    background-image: none;
}
.x-toolbar-dark .x-button, .x-toolbar .x-toolbar-dark .x-button, .x-toolbar-dark .x-field-select .x-component-outer, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer, .x-toolbar-dark .x-field-select .x-component-outer::before, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before {
    border: 1px solid #000000;
    border-top-color: #000000;
    color: white;
}
.x-toolbar-dark .x-button.x-button-pressing, .x-toolbar-dark .x-button.x-button-pressing::after, .x-toolbar-dark .x-button.x-button-pressed, .x-toolbar-dark .x-button.x-button-pressed::after, .x-toolbar-dark .x-button.x-button-active, .x-toolbar-dark .x-button.x-button-active::after, .x-toolbar .x-toolbar-dark .x-button.x-button-pressing, .x-toolbar .x-toolbar-dark .x-button.x-button-pressing::after, .x-toolbar .x-toolbar-dark .x-button.x-button-pressed, .x-toolbar .x-toolbar-dark .x-button.x-button-pressed::after, .x-toolbar .x-toolbar-dark .x-button.x-button-active, .x-toolbar .x-toolbar-dark .x-button.x-button-active::after, .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressing, .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressing::after, .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressed, .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressed::after, .x-toolbar-dark .x-field-select .x-component-outer.x-button-active, .x-toolbar-dark .x-field-select .x-component-outer.x-button-active::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressing, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressing::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressed, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-pressed::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-active, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer.x-button-active::after, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressing, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressing::after, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressed, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressed::after, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-active, .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-active::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressing, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressing::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressed, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-pressed::after, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-active, .x-toolbar .x-toolbar-dark .x-field-select .x-component-outer::before.x-button-active::after {
    background-color: #383838;
    background-image: none;
}

/*Done Button styles overriding*/
.x-button.x-button-action, .x-button.x-button-action.x-button-back::after, .x-button.x-button-action.x-button-forward::after, .x-toolbar .x-button.x-button-action, .x-toolbar .x-button.x-button-action.x-button-back::after, .x-toolbar .x-button.x-button-action.x-button-forward::after, .x-button.x-button-action-round, .x-button.x-button-action-round.x-button-back::after, .x-button.x-button-action-round.x-button-forward::after, .x-toolbar .x-button.x-button-action-round, .x-toolbar .x-button.x-button-action-round.x-button-back::after, .x-toolbar .x-button.x-button-action-round.x-button-forward::after, .x-button.x-button-action-small, .x-button.x-button-action-small.x-button-back::after, .x-button.x-button-action-small.x-button-forward::after, .x-toolbar .x-button.x-button-action-small, .x-toolbar .x-button.x-button-action-small.x-button-back::after, .x-toolbar .x-button.x-button-action-small.x-button-forward::after {
    background-color: #303030;
    background-image: none;
}
.x-button.x-button-action, .x-toolbar .x-button.x-button-action, .x-button.x-button-action-round, .x-toolbar .x-button.x-button-action-round, .x-button.x-button-action-small, .x-toolbar .x-button.x-button-action-small {
    border: 1px solid #000000;
    border-top-color: #000000;
    color: white;
}
.x-button.x-button-action.x-button-pressing, .x-button.x-button-action.x-button-pressing::after, .x-button.x-button-action.x-button-pressed, .x-button.x-button-action.x-button-pressed::after, .x-button.x-button-action.x-button-active, .x-button.x-button-action.x-button-active::after, .x-toolbar .x-button.x-button-action.x-button-pressing, .x-toolbar .x-button.x-button-action.x-button-pressing::after, .x-toolbar .x-button.x-button-action.x-button-pressed, .x-toolbar .x-button.x-button-action.x-button-pressed::after, .x-toolbar .x-button.x-button-action.x-button-active, .x-toolbar .x-button.x-button-action.x-button-active::after, .x-button.x-button-action-round.x-button-pressing, .x-button.x-button-action-round.x-button-pressing::after, .x-button.x-button-action-round.x-button-pressed, .x-button.x-button-action-round.x-button-pressed::after, .x-button.x-button-action-round.x-button-active, .x-button.x-button-action-round.x-button-active::after, .x-toolbar .x-button.x-button-action-round.x-button-pressing, .x-toolbar .x-button.x-button-action-round.x-button-pressing::after, .x-toolbar .x-button.x-button-action-round.x-button-pressed, .x-toolbar .x-button.x-button-action-round.x-button-pressed::after, .x-toolbar .x-button.x-button-action-round.x-button-active, .x-toolbar .x-button.x-button-action-round.x-button-active::after, .x-button.x-button-action-small.x-button-pressing, .x-button.x-button-action-small.x-button-pressing::after, .x-button.x-button-action-small.x-button-pressed, .x-button.x-button-action-small.x-button-pressed::after, .x-button.x-button-action-small.x-button-active, .x-button.x-button-action-small.x-button-active::after, .x-toolbar .x-button.x-button-action-small.x-button-pressing, .x-toolbar .x-button.x-button-action-small.x-button-pressing::after, .x-toolbar .x-button.x-button-action-small.x-button-pressed, .x-toolbar .x-button.x-button-action-small.x-button-pressed::after, .x-toolbar .x-button.x-button-action-small.x-button-active, .x-toolbar .x-button.x-button-action-small.x-button-active::after {
    background-color: #383838;
    background-image: none;
}