Not able to override default css class in custom css file

[gendaful]

Hi.

I am trying to change the default image in select field with my custom image. Below are the classes declared in sencha-touch-debug.css which needs to be overriden for this change.

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



The highlighted red lines are responsible for applying the image and background respectively.


I tried to override these styles in my css class file by declaring them once again in my css class but these 2 highlighted properties are getting the priority anyhow and in spite of giving priority = important in my custom css file, I am not able to override them in my custom css files. Please see, If I comment the highlighted lines in sencha-touch-debug.css then only custom css classes are applied.


My Css class


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

}


Any ideas?

Thanks
Gendaful

[gendaful]

I was able to overcome this issue and applied following stylings to override the default styling by sencha and applied custom image on select field as below.


User Defined CSS >> Applied following styling to override the default sencha style for select field


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

Hope it will be helpful to others.

Thanks
Gendaful