It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
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.
<!-- this script is provided by http://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='http://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!