How to apply color for Textbox prompt using css in Outsystems web?Guidance Please..

Solution

Hi Saravanan,


There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder.


Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).


Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while


Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. 


Most modern browsers support the simple pseudo-element ::placeholder


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}


You can use the above CSS to change the colors of Prompt messes.


Regards,

Pankaj



Solution

https://success.outsystems.com/Documentation/10/Developing_an_Application/Design_UI/Look_and_Feel/Cascading_Style_Sheets_(CSS)

Pankaj pant wrote:

Hi Saravanan,


There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder.


Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).


Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while


Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. 


Most modern browsers support the simple pseudo-element ::placeholder


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}


You can use the above CSS to change the colors of Prompt messes.


Regards,

Pankaj



Thanks!! That Works Fine..


You are welcome, I'm glad I could help. Happy coding....

Hi Saravanan,

Adding to what Pankaj has said if you want to apply the place holder/prompt css on any specific input place holder just add CSS style class to the respective input control. Demo Link


for eg: change (as per below illustrated)

SyntaxEditor Code Snippet

.change::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #909;
}


Thanks,

Regards,

Benjith Sam