1. #1
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

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

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


    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?

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      1  

    Default


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

    index.js
    Code:
    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
    PHP Code:
    .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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  3. #3
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

    Default


    Thank you Andrea! I've just found the same solution, and post it on http://www.sencha.com/forum/showthre...r-in-TextField .

  4. #4
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by openthesky7 View Post
    Thank you Andrea! I've just found the same solution, and post it on http://www.sencha.com/forum/showthre...r-in-TextField .
    You are welcome
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  5. #5
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

    Default


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

    I've change a little bit colors of form:



    Textfield is disabled... and looks awful..

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

    Any idea?

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

    Default


    Under WebKit (MacOS X):


  7. #7
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

    Default


    Ta-da!!!!


    I found.. :-)


    It's important to add:

    Code:
    input:disabled{
    	opacity: 1!important;
    }
    to CSS file. Look&feel will be the same like in Safari (not mobile).

  8. #8
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi openthesky.
    Sorry I was out, glad you already found a solution
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  9. #9
    Sencha User
    Join Date
    Jan 2011
    Location
    openthesky7(at)gmail.com
    Posts
    54
    Vote Rating
    1
    openthesky7 is on a distinguished road

      0  

    Default


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

Similar Threads

  1. ScrollBar Color with the changing themes color
    By Rakesh Kumar in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 18 May 2012, 7:23 AM
  2. How to change background-color of TextField ?
    By skywareyu79 in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 3 Nov 2010, 7:47 PM
  3. [CLOSED] placeHolder vs. placeholder
    By Ralph Haygood in forum Sencha Touch 1.x: Bugs
    Replies: 3
    Last Post: 18 Aug 2010, 9:49 AM
  4. How to change textfield color in DateField
    By ror in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 30 Sep 2009, 6:01 AM
  5. Change row's text color (not background-color) in grid
    By khnle in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 5 Feb 2008, 6:47 AM

Thread Participants: 1