SenchaTouch Themes - how to change color of placeHolder in textfield?

[openthesky7]

I'm trying to change color of text of textfield. When field is in input mode it is possible to change text color and background with inputCls. But when it is a text defined with placeHolder ??? How to do this?

[AndreaCammarata]

Hi openthesky7.
I post you a simple example to show you how to change your textfield placeHolder color

index.js


Ext.setup({
onReady: function() {
new Ext.form.FormPanel({
fullscreen: true,
items: [{
xtype: 'textfield',
label: 'Name',
cls: 'customField',
placeHolder: 'Insert your name here'
},{
xtype: 'textfield',
label: 'Surname',
placeHolder: 'Insert your surname here'
}]
});
}
});


style.css


.customField input::-webkit-input-placeholder {
color: #2e4bc5;
}


As you can see in the example I define a FormPanel with two textfield inside.

- The name textfield has a custom cls "customField" that is defined inside the style.css.
- The surname textfield has no custom css.

In this way only the "name" textfield has a placeHolder with blue color.

Hope this helps.

[openthesky7]

Thank you Andrea! I've just found the same solution, and post it on http://www.sencha.com/forum/showthread.php?122043-placeHolder-color-in-TextField .

[AndreaCammarata]

Thank you Andrea! I've just found the same solution, and post it on http://www.sencha.com/forum/showthread.php?122043-placeHolder-color-in-TextField .

You are welcome :)

[openthesky7]

I have new problem.. Maybe you will helpful... ;)

I've change a little bit colors of form:

http://www.directdreams.com/priv/st1.png

Textfield is disabled... and looks awful..

Under latest MacOSX/Safari (WebKit nightly build) looks good...

Any idea?

[openthesky7]

Under WebKit (MacOS X):

http://www.directdreams.com/priv/st2.png

[openthesky7]

Ta-da!!!!


I found.. :-)


It's important to add:


input:disabled{
opacity: 1!important;
}


to CSS file. Look&feel will be the same like in Safari (not mobile).

[AndreaCammarata]

Hi openthesky.
Sorry I was out, glad you already found a solution ;)

[openthesky7]

Yea... I think that the last thing supposed to be as default in Sencha Touch library (according to iphone problem).