JS Animated. 如何更改输入的占位符文本颜色
August 10, 2015
本教程展示了如何进行更改 the placeholder text color 任何形式的输入.
The placeholder 属性指定一个简短的提示,该提示描述了输入字段(例如.g. 期望格式的样例值或简短描述). 在用户输入值之前,在输入字段中显示简短提示.
Placeholder 输入中的文本(在目前实现它的浏览器中)是浅灰色的. 要设置样式,您需要添加 vendor prefix CSS properties.
,以更改默认值 placeholder 上色时,应执行以下操作:
-
根据下面的信息编写代码(注), 你需要把相同的代码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; }
-
-
选择要放置代码的文件. 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
-
保存更改并将CSS文件上传到服务器.
请随时查看下面的详细视频教程: