Html Colorful Placeholder
Written by 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 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='www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!