Categories

Featured templates

How to change the placeholder text color of an input

Guillaume Dumas June 25, 2015
Rating: 4.2/5. From 13 votes.
Please wait...

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

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.

By default, placeholder text has a light gray color (in the browsers implementing it so far). To style it, you’ll need 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. You can put it in any CSS file of your site, but we’ve prepared a list of recommended files for each template engine:

    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:

How to change the placeholder text color of an input

You can also browse our Bootstrap Admin Themes, if you need more themes with CSS functionality.

Best OpenCart Themes
This entry was posted in Working with CSS and tagged color, css, input, placeholder, text. 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