CSS Prompt | OutSystems

Back to Forums

Saravanan Santhanam

Solved

CSS Prompt

Question

Forge

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

23 Jan 2019

Pankaj pant

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

23 Jan 2019

2 replies

Last reply 05 Jul 2020

Show thread

Hide thread

Saravanan Santhanam

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..

23 Jan 2019

Jan Patricia Espina

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

How about for mobile? How to change the prompt color only in dropdown?

05 Jul 2020

Wasabi

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

23 Jan 2019

Pankaj pant

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

23 Jan 2019

Benjith Sam

MVP

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

23 Jan 2019

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines