0

我正在尝试使用我的自定义图像更改选择字段中的默认图像。下面是在 sencha-touch-debug.css 中声明的类，需要重写这些类以进行此更改。

.x-selectmark-base, .x-field-select .x-component-outer:after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 50%;
left: auto;
right: 0.7em;
-webkit-mask-size: 1em;
**-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....');**
margin-top: -0.5em;
}




/* line 634, ../themes/stylesheets/sencha-touch/default/widgets/_form.scss */
.x-field-select .x-component-outer:after {
**background-color: #dddddd;**
}

突出显示的红线分别负责应用图像和背景。

我试图通过在我的 css 类中再次声明它们来覆盖我的 css 类文件中的这些样式，但是这两个突出显示的属性无论如何都获得了优先级，尽管在我的自定义 css 文件中给出了 priority = important，但我无法覆盖它们在我的自定义 css 文件中。请参阅，如果我在 sencha-touch-debug.css 中注释突出显示的行，则仅应用自定义 css 类。

我的 CSS 课

.x-selectmark-base,.x-field-select .x-component-outer:after {
webkit-mask-image: url("../../resources/images/main_menu_arrow.png") !important;
margin-top: -0.5em;

}


.x-field-select .x-component-outer:after {

content: url("../../resources/images/main_menu_arrow.png") !important;
margin-top: -35px !important;
margin-right:8px !important;

}

有任何想法吗？

谢谢 Gendaful

4

1 回答 1

0

我能够克服这个问题并应用以下样式来覆盖 sencha 的默认样式，并在选择字段上应用自定义图像，如下所示。

用户定义的 CSS >> 应用以下样式来覆盖选择字段的默认 sencha 样式

.x-selectmark-base,.x-field-select .x-component-outer:after {

    webkit-mask-image: none !important;
    margin-top: -0.5em;

}

.x-field-select .x-component-outer:after {

    content: none !important;

}

// Applied this user defined class to specify the background color and background image on select field

.chooseCountrySelectField {
        background: url('../../resources/images/main_menu_arrow.png') no-repeat right,  -webkit-gradient(linear, left top, left bottom, color-stop(0%, #faebb0),
        color-stop(100%, #f3ce72));
}

希望这个解决方案对其他人有用。

于 2013-02-07T23:21:52.803 回答