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 .
Please make sure that these css won't work on registered css file in ADF appliction so need to write an external css file .
