JS Animated. 如何更改输入的占位符文本颜色

本教程展示了如何进行更改 the placeholder text color 任何形式的输入.

JS Animated. 如何更改输入的占位符文本颜色

The placeholder 属性指定一个简短的提示，该提示描述了输入字段(例如.g. 期望格式的样例值或简短描述). 在用户输入值之前，在输入字段中显示简短提示.

Placeholder 输入中的文本(在目前实现它的浏览器中)是浅灰色的. 要设置样式，您需要添加 vendor prefix CSS properties.

，以更改默认值 placeholder 上色时，应执行以下操作:

1. 根据下面的信息编写代码(注), 你需要把相同的代码4次为每个 vendor prefix):

   • 下面的代码将更改 placeholder 这些输入类型的颜色: 文本，搜索，url，电话，电子邮件， and password:

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

     

   • 下面的代码将更改 placeholder color for text areas 的消息体 contact form is entered):

     					文本区域:-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;  
     					}
     				

     

   • 下面的代码将更改 placeholder 特定的颜色 input type, in our case email:

     					输入(type = "电子邮件"]::-webkit-input-placeholder {
     					color: blue !important;
     					}
     					
     					输入[type="email"]:-moz-占位符{/* Firefox 18- */
     					color: blue !important;  
     					}
     					
     					输入[type="email"]::-moz-占位符{/* Firefox 19+ */
     					color: blue !important;  
     					}
     					
     					输入(type = "电子邮件"):-ms-input-placeholder {  
     					color: blue !important;  
     					}
     				

     

2. 选择要放置代码的文件. Virtually, 你可以把它放在你网站的任何CSS文件中, 但是我们为您准备了一个针对每个模板引擎的推荐文件列表.

   CMS Templates:

   • WordPress主题(WooCommerce/Jigoshop主题) / wp-content /主题/ themeXXXXX /风格.css
   • Joomla模板(VirtueMart模板) /模板/ themeXXXX / css /模板.css
   • Drupal Themes /网站/ /主题/ themeXXX / css /风格.css
   • Web (HTML5)模板 /css/style.css

   电子商务模板:

   • Magento Themes /skin/frontend/违约/ themeXXX / css /风格.css
   • PrestaShop Themes /主题/ themeXXXX / css /全球.css
   • OpenCart模板 /目录/视图/主题/ themeXXX /stylesheet/stylesheet.css
   • ZenCart Templates / /模板/包括themeXXX / css /stylesheet.css
   • osCommerce模板 /css/stylesheet.css
   • Shopify Themes style.css.liquid

3. 保存更改并将CSS文件上传到服务器.

请随时查看下面的详细视频教程:

JS Animated. 如何更改输入的占位符文本颜色