How to change the placeholder text color of an input<\/a><\/p>\r\n 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.<\/p>\r\n 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.<\/p>\r\n In order to change the default placeholder color, you should perform the following:<\/p>\r\n Compose the code according to the information below (note, you need to put the same code 4 times for each vendor prefix):<\/p>\r\n The following code will change the placeholder color for such input types: text, search, url, tel, email,<\/strong> and password<\/strong>:<\/p>\r\n The following code will change the placeholder color for text areas<\/strong> (where usually the message body of the contact form is entered):<\/p>\r\n The following code will change the placeholder color specifically for a certain input type<\/strong>, in our case email<\/strong>:<\/p>\r\n 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:<\/p>\r\n \r\n\t\t\tSave the changes and upload the CSS file to your server.\r\n\t\t<\/p>\r\n<\/li>\r\n<\/ol>\r\n Feel free to check the detailed video tutorial below:<\/p>\r\n How to change the placeholder text color of an input<\/a><\/p>\r\n<\/p>\r\nYou can also browse our Bootstrap Admin Themes<\/a>, if you need more themes with CSS functionality.\r\n <\/p>","protected":false},"excerpt":{"rendered":" This tutorial shows how to change the placeholder text color<\/strong> of an input of any form.<\/p>\n","protected":false},"author":85,"featured_media":49741,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[256],"tags":[520,514,910,1880,518],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49734"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=49734"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/49734\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/49741"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=49734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=49734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=49734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\n
\r\n
\r\n\t\t\t\t\tinput::-webkit-input-placeholder {\r\n\t\t\t\t\tcolor: red !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tinput:-moz-placeholder { \/* Firefox 18- *\/\r\n\t\t\t\t\tcolor: red !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tinput::-moz-placeholder { \/* Firefox 19+ *\/\r\n\t\t\t\t\tcolor: red !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tinput:-ms-input-placeholder { \r\n\t\t\t\t\tcolor: red !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t<\/pre>\r\n![\"How_to_change_the_placeholder_text_color_of_an_input-1\"](\"\/help\/wp-content\/uploads\/2015\/06\/How_to_change_the_placeholder_text_color_of_an_input-1-300x169.jpg\")
<\/a>\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\ttextarea::-webkit-input-placeholder {\r\n\t\t\t\t\tcolor: green !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\ttextarea:-moz-placeholder { \/* Firefox 18- *\/\r\n\t\t\t\t\tcolor: green !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\ttextarea::-moz-placeholder { \/* Firefox 19+ *\/\r\n\t\t\t\t\tcolor: green !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\ttextarea:-ms-input-placeholder { \r\n\t\t\t\t\tcolor: green !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t<\/pre>\r\n![\"How_to_change_the_placeholder_text_color_of_an_input-2\"](\"\/help\/wp-content\/uploads\/2015\/06\/How_to_change_the_placeholder_text_color_of_an_input-2-300x169.jpg\")
<\/a>\r\n\t\t\t<\/li>\r\n\r\n\t\t\t\t\tinput[type=\"email\"]::-webkit-input-placeholder {\r\n\t\t\t\t\tcolor: blue !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tinput[type=\"email\"]:-moz-placeholder { \/* Firefox 18- *\/\r\n\t\t\t\t\tcolor: blue !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tinput[type=\"email\"]::-moz-placeholder { \/* Firefox 19+ *\/\r\n\t\t\t\t\tcolor: blue !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\tinput[type=\"email\"]:-ms-input-placeholder { \r\n\t\t\t\t\tcolor: blue !important; \r\n\t\t\t\t\t}\r\n\t\t\t\t<\/pre>\r\n![\"How_to_change_the_placeholder_text_color_of_an_input-3\"](\"\/help\/wp-content\/uploads\/2015\/06\/How_to_change_the_placeholder_text_color_of_an_input-3-300x169.jpg\")
<\/a>\r\n\t\t\t<\/li>\r\n<\/ul>\r\n<\/li>\r\nCMS Templates:<\/h5>\r\n
\r\n
E-commerce Templates:<\/h5>\r\n
\r\n