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クラスファイルでこれらのスタイルをオーバーライドしようとしましたが、これらの2つの強調表示されたプロパティがとにかく優先され、カスタム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;

}

何か案は？

ありがとうゲンダフル

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 に答える