Sencha Touch 2: невозможно переопределить класс CSS по умолчанию в пользовательском файле CSS

Я пытаюсь изменить изображение по умолчанию в поле выбора с моим пользовательским изображением. Ниже приведены классы, объявленные в 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, но эти 2 выделенных свойства все равно получают приоритет, и, несмотря на то, что в моем пользовательском файле 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;

}

Есть идеи?

Спасибо, Гендафул.


css extjs sencha-touch sencha-touch-2 sencha-touch-2.1
person Gendaful    schedule 07.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я смог преодолеть эту проблему и применил следующие стили, чтобы переопределить стиль по умолчанию с помощью sencha, и применил пользовательское изображение в поле выбора, как показано ниже.

Пользовательский 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));
}

Надеюсь, это решение будет полезно другим.

person Gendaful    schedule 07.02.2013