如何使用CSS更改占位符颜色?

2024-01-17 15:55 小编
 如何使用CSS更改占位符颜色?
 
  在css中想要更改占位符的颜色,可以非标准选择器::placeholder来实现,它是用于设置表单输入框占位符的外观,通过该选择器可以改变占位符的样式,例如:颜色。【相关视频教程推荐:CSS教程】
 
  对于不同的浏览器,::placeholder选择器的写法是不同的,下面我们来了解一下。
 
  对于Chrome,Mozilla和Opera浏览器,选择器可以写为:
 
  ::placeholder
 
  对于InternetExplorer,选择器需要写为:
 
  :-ms-input-placeholder
 
  对于InternetEdge,选择器需要写为:
 
  ::-ms-input-placeholder
 
  代码示例
 
  下面我们通过简单的代码示例来具体了解一下如何使用::placeholder选择器来更改占位符颜色。
 
  示例1:在不同浏览器中使用::placeholder选择器
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="UTF-8">
 
  <title>CSS更改占位符颜色</title>
 
  <style>
 
  ::placeholder{/*Firefox,Chrome,Opera*/
 
  color:blue;
 
  font-size:15px;
 
  }
 
  :-ms-input-placeholder{/*InternetExplorer10-11*/
 
  color:red;
 
  font-size:15px;
 
  }
 
  ::-ms-input-placeholder{/*MicrosoftEdge*/
 
  color:orange;
 
  font-size:15px;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="demo">
 
  <p>更改占位符颜色</p>
 
  <inputtype="text"placeholder="请输入.....">
 
  </div>
 
  </body>
 
  </html>


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码