Monday 14 September 2015

Placeholder text Css in ADF

A browser apply predefined style to the placeholder attribute. Basically for placeholder colors varying in browser to browser.

If we want to apply same colors and different css property's to the placeholder, The below are the css selectors to achieve custom look and feel.

Wee need to add browser specific pseudo elements to the input component.

For Chrome:

The below pseudo element apply for all input components.

input[placeholder]::-webkit-input-placeholder
{
//Our Css propertys
}

The below pseudo element apply for specific input component.

.myCustomStyleClass input[placeholder]::-webkit-input-placeholder
{
//Our Css propertys
}

For Firefox:

The below pseudo element apply for all input components.

input::-moz-placeholder { 
//Our Css propertys
        opacity: 1;
}

Need to give opacity for Firefox because opacity is coming from default predefined styling.

The below pseudo element apply for specific input component.

.myCustomStyleClass input::-moz-placeholder { 
//Our Css propertys
        opacity: 1;
}

For Internet Explorer:

The below pseudo element apply for all input components.

input:-ms-input-placeholder
{
//Our Css propertys
}

The below pseudo element apply for specific input component.

.myCustomStyleClass input:-ms-input-placeholder
{
//Our Css propertys
}

Please make sure that these css won't work on registered css file in ADF appliction so need to write an external css file .

8 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. hai venkatesh may i know how to override popup note window selecters.............

    Thanks in advance.

    ReplyDelete
  3. Hi Dandu ..

    Sudhir here ..

    in jdev 11.1.1.5 thr is no placeholder so how to achieve ..

    ReplyDelete
  4. Hi,Placeholder is just attribute for inputText component.Whatever the value is given to placeholder attribute will get.For internet explorer 9.0 version have problem,It won't show. For that we need to write jquery.

    Thanks,
    Dandu

    ReplyDelete
  5. hi dandu i want to know when mouse is clicked on the particular input text field the place holder must be disappeared how can we achieve this?

    ReplyDelete
  6. Hi I want to apply the place holder text for each and every filter. How to achieve this.

    ReplyDelete
  7. It's extremely fantastic data and all the more genuine certainties to gave that post. aviation website development

    ReplyDelete
  8. By and large the real concern was, "personal development". Each characterized available resources of accomplishing this development.בדיקת אייקיו

    ReplyDelete