Categories

Featured templates

Featured templates

JS Animated. How to change the placeholder text color of an input

Guillaume Dumas August 10, 2015
Rating: 5.0. From 1 vote.
Please wait...

This tutorial shows how to change the placeholder text color of an input in any form.

JS Animated. How to change the placeholder text color of an input

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you’ll need to add vendor prefix CSS properties.

In order to change the default placeholder color, you should perform the following:

  1. Compose the code according to the information below (note, you need to put the same code 4 times for each vendor prefix):

    • The following code will change the placeholder color for such input types: text, search, url, tel, email, and password:

      					input::-webkit-input-placeholder {
      					color: red !important;
      					}
      					
      					input:-moz-placeholder { /* Firefox 18- */
      					color: red !important;  
      					}
      					
      					input::-moz-placeholder {  /* Firefox 19+ */
      					color: red !important;  
      					}
      					
      					input:-ms-input-placeholder {  
      					color: red !important;  
      					}
      				

      How_to_change_the_placeholder_text_color_of_an_input-1

    • The following code will change the placeholder color for text areas (where usually the message body of the contact form is entered):

      					textarea::-webkit-input-placeholder {
      					color: green !important;
      					}
      					
      					textarea:-moz-placeholder { /* Firefox 18- */
      					color: green !important;  
      					}
      					
      					textarea::-moz-placeholder {  /* Firefox 19+ */
      					color: green !important;  
      					}
      					
      					textarea:-ms-input-placeholder {  
      					color: green !important;  
      					}
      				

      How_to_change_the_placeholder_text_color_of_an_input-2

    • The following code will change the placeholder color specifically for a certain input type, in our case email:

      					input[type="email"]::-webkit-input-placeholder {
      					color: blue !important;
      					}
      					
      					input[type="email"]:-moz-placeholder { /* Firefox 18- */
      					color: blue !important;  
      					}
      					
      					input[type="email"]::-moz-placeholder {  /* Firefox 19+ */
      					color: blue !important;  
      					}
      					
      					input[type="email"]:-ms-input-placeholder {  
      					color: blue !important;  
      					}
      				

      How_to_change_the_placeholder_text_color_of_an_input-3

  2. Choose a file to place your code in. Virtually, you can put it in any CSS file of your site, but there is a list of recommended files for each template engine we’ve prepared for you.

    CMS Templates:
    • WordPress Themes (WooCommerce/Jigoshop Themes) /wp-content/themes/themeXXXXX/style.css
    • Joomla Templates (VirtueMart Templates) /templates/themeXXXX/css/template.css
    • Drupal Themes /sites/all/themes/themeXXX/css/style.css
    • Web (HTML5) templates /css/style.css
    E-commerce Templates:
    • Magento Themes /skin/frontend/default/themeXXX/css/styles.css
    • PrestaShop Themes /themes/themeXXXX/css/global.css
    • OpenCart Templates /catalog/view/theme/themeXXX/stylesheet/stylesheet.css
    • ZenCart Templates /includes/templates/themeXXX/css/stylesheet.css
    • osCommerce Templates /css/stylesheet.css
    • Shopify Themes style.css.liquid
  3. Save the changes and upload the CSS file to your server.

Feel free to check the detailed video tutorial below:

JS Animated. How to change the placeholder text color of an input

OpenCart Responsive Themes
This entry was posted in JS Animated tutorials and tagged color, HTML, input, placeholder. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.