Sencha Touch 2：無法覆蓋自定義css文件中的默認css類

我正嘗試使用自定義圖像更改選擇字段中的默認圖像。下面是在sencha-touch-debug.css中聲明的類，這些變量需要被覆蓋。Sencha Touch 2：無法覆蓋自定義css文件中的默認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文件中覆蓋它們。請參閱，如果我在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

來源

2013-02-07 Gendaful

我是能夠克服這個問題，並應用於以下花式覆蓋由煎茶默認的造型和下面的選擇領域的應用自定義圖像。

用戶定義的CSS >>應用以下樣式覆蓋默認煎茶樣式選擇字段

.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)); 
}

希望這sollution將是有用的人。

來源

2013-02-07 23:21:52 Gendaful

Sencha Touch 2：無法覆蓋自定義css文件中的默認css類

回答

相關問題