如何在sencha touch 2框架中更改选择字段的完成和取消按钮的颜色

Question

//嗨，我正在使用 sencha touch 2.0 框架。我在我的项目中使用了选择字段，事情是我需要更改选择字段的完成和取消按钮的颜色。但是这些选择器按钮在浏览器中不可见，但出现在 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;
}