如何更改 sencha 中的 Select 字段样式

Question

我想将我的图像应用到 sencha 中的选择字段。

那我该怎么做呢。

我已经在课堂上为此创建了

这里是选择字段的代码

 xtype: 'selectfield',
                baseCls: 'x-field-select',
                cls: 'selectclass',
                id: 'fieldGeslacht',
                name: 'pickergeslacht',
                options: [
                    {
                        text: 'Man',
                        value: 'Man'
                    },
                    {
                        text: 'Vrouw',
                        value: 'Vrouw'
                    }
                ],
                usePicker: 'test',
                component: {
                    useMask: true
                }

我改变的煎茶主题类别在这里：

.selectclass
{    
     overflow: hidden !important;
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;   
    color: white !important;
    background: url("../img/registreren/2.JPG") no-repeat scroll 100% 0px #FFFFFF; 

}

.x-selectmark-base, .x-field-select, .x-component-outer::after
{
    overflow: hidden !important;
    width: 90% !important;
    margin-left:auto;
    margin-right: auto !important;   
    color: white !important;
    background: url("../img/registreren/2.JPG") no-repeat scroll 100% 0px #FFFFFF !important; 
    -webkit-mask-image:url("../img/registreren/2.JPG") !important;
    -webkit-mask-size: 100% !important;
}

但这不起作用，所以请任何人帮助将我的样式应用于 sencha 选择字段。

谢谢。

Answer 1

最近我在选择字段中使用了以下 css。希望对你有帮助

.selectfield {
display: block;

.x-label-align-left {
    &:first-child {
      .x-form-label {
        @if $include-border-radius { @include border-top-right-radius($form-fieldset-radius); }
      }
    }

    &:last-child {
      .x-form-label {
        @if $include-border-radius { @include border-bottom-left-radius(0); }
      }
    }        
}
.x-form-label {
    span {
      font-size: 14px;
    }
}    
.x-component-outer {
    &:after {
        margin-top: .5em;
    }
    &:before {
        background: none;
    }
    .x-field-input{
        font-size: 14px;
    }
}
}

选择字段煎茶

           { 
            xtype : 'selectfield',
            cls   : 'selectfield',
            margin  : '5px',
            usePicker : true,
          },

Answer 2

只尝试baseCls，不要同时尝试，这样代码会是这样的

xtype: 'selectfield',
                baseCls: 'selectclass',
                id: 'fieldGeslacht',
                name: 'pickergeslacht',
                options: [
                    {
                        text: 'Man',
                        value: 'Man'
                    },
                    {
                        text: 'Vrouw',
                        value: 'Vrouw'
                    }
                ],
                usePicker: 'test',
                component: {
                    useMask: true
                }