How to change the default style of sencha touch input textfield?

Question

I want to change the way how the input textfield looks in Sencha touch. I want the text field to look like the one shown below

I tried changing the css to

background-color: rgba(0,0,0,0.0);

So that the background is transparent.I also tried adjusting the borders but it didn't work for me.

Please help me with this.

Answer 1

1> view file

                               {
                                    xtype: 'textfield',
                                    name: 'email',
                                    clearIcon: false,
                                    itemId: 'name',
                                    ui: 'plain',
                                    inputCls: 'login-textfield',                                        
                                    placeHolder: 'Email'
                                }

2> .css file

.login-textfield {
    background-color: #fff !important;
    color: #5d5d56 !important;
}

3> to be more precise white color background to you parent panel (xtype: 'fieldset) by using style or cls config.

Answer 2

根据您的要求，您必须创建css类，并将其作为baseCls和inputCls这些作为textfied的配置。

Answer 3

1) goto Sencha docs

2) enter "textfield" in the top right search field

3) in the header bar hover over "CSS Vars"

.

As you can see there are quite some $Vars you can use to easily style the text input fields. Still to make the input fields look like, what you want, you will need a bit more CSS.

.

4) use inputCls as mentioned by Naresh Tank, but for now avoid baseCls (Naresh is more experienced and therefore, whats easy for him, might be not for you here).

Happy styling. Everything else is not Sencha Touch, but pure CSS.

Answer 4

Use sencha mountainView theme for android and then make change background color. it will work.