Html Colorful Placeholder

Written by @kerixa 6 March 2021

Text and input forms are among the most important parts of any website because the required data is supposed to be written in these forms. Therefore, the user's ease of working with these forms is of particular importance. Placeholders are usually used to inform the users what should be written in the input box or provide an example. On the other hand, the beauty of the forms prevents the user from being confused. In the following code, we have created this beauty for the input by making the placeholder colorful.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
input {
    outline: none;
    padding: 12px;
    border-radius: 3px;
    border: 1px solid black;
}

::-webkit-input-placeholder { /* Chrome */
    color: red;
    transition: opacity 250ms ease-in-out;
}

:focus::-webkit-input-placeholder {
    opacity: 0.5;
}

:-ms-input-placeholder { /* IE 10+ */
    color: red;
    transition: opacity 250ms ease-in-out;
}

:focus:-ms-input-placeholder {
    opacity: 0.5;
}

::-moz-placeholder { /* Firefox 19+ */
    color: red;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

:focus::-moz-placeholder {
    opacity: 0.5;
}

:-moz-placeholder { /* Firefox 4 - 18 */
    color: red;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

:focus:-moz-placeholder {
    opacity: 0.5;
}
</style>
<input placeholder="Search"><a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300