input的改变placeholder的颜色

最新推荐文章于 2025-05-20 09:27:14 发布
最新推荐文章于 2025-05-20 09:27:14 发布
阅读量468 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014227715/article/details/78249079
本文介绍两种方法来解决网页中输入框占位符颜色的问题。第一种使用CSS伪元素选择器来更改颜色及透明度；第二种利用JavaScript focus事件来清空默认提示文字。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<input type="text"   placeholder="123"/>

第一种解决办法：
::-webkit-input-placeholder{ color:#ea7a7a}
:-moz-placeholder{ color:#ea7a7a}
::-moz-placeholder{ color:#ea7a7a}
:-ms-input-placeholder{ color:#ea7a7a}
:focus::-webkit-input-placeholder{ opacity:0;}
:focus:-moz-placeholder{ opacity:0;}
:focus::-moz-placeholder{ opacity:0;}
:focus:-ms-input-placeholder{ opacity:0;}



第二种：


<input type="text"  value="例如：荷棠鱼坊烤鱼 或樱花日本料理"/>
直接设置
color:#ea7a7a就行了。
通过js的focus把value清空就好了、



                

        

    

    
  



    



                



	

		

			

				
					
CSS - 改变 input 输入框 placeholder 的字体颜色大小

				
			

			

				

					资深程序员
				

				

					01-30
					
					3845
					
				

			

		

		

			
				
前言
该方法只适用于 pc 端，移动端无效。
代码
input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px;
    color: #333;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    font-size:14px;
    color: #333;
} 
input:-ms-input-placeholder {

			
		

	



                

            
              



	

		

			

				
					
修改输入框placeholder文字默认颜色-webkit-input-placeholder方法

				
			

			

				

					12-13
				

			

		

		

			
				
html5为input添加了原生的占位符属性placeholder，高级浏览器都支持这个属性，例如：
<input type="text" placeholder="搜索" value=" ">
默认的placeholder字体颜色是呈浅灰色，如果想改变这个默认颜色，解决方案如下：
XML/HTML Code复制内容到剪贴板
    input:-moz-placeholder,   
    textarea:-moz-placeholder {   
        color: #999999;   
    }   
      
    input:-ms-input-placeho

			
		

	



              


  
              

                


	

		

			

				
					
CSS 修改input中的placeholder默认颜色

					
热门推荐

				
			

			

				

					单枪匹码
				

				

					12-05
					
					6万+
					
				

			

		

		

			
				
使用input-placeholder属性来修改placeholder的默认颜色：
1、说明：placeholder是input框中的提示文字，默认是灰色的，而color是修改input中用户输入文本的颜色，所以不能通过color来设置placeholder的颜色。
2、修改页面所有input中placeholder颜色的语法：（直接写在<style></style>标签下...

			
		

	





	

		

			

				
					
使用CSS更改HTML输入框占位符颜色

					
最新发布

				
			

			

				

					qq_29715355的博客
				

				

					05-20
					
					945
					
				

			

		

		

			
				
在网页开发中，输入框的占位符（placeholder）为用户提供了输入提示。默认情况下，占位符的颜色通常是灰色，有时可能不符合网页的整体设计风格。因此，开发者可能需要通过CSS来更改占位符的颜色，以提升用户体验和页面的美观度。

			
		

	



		

			
		



	

		

			

				
					
input placeholder 设置颜色

				
			

			

				

					活到老学到老
				

				

					04-03
					
					2218
					
				

			

		

		

			
				
将上述代码添加到您的CSS文件中，或者将其直接写在HTML文件的。可以通过使用CSS来设置输入框的颜色。

			
		

	





	

		

			

				
					
改变input框中placeholder颜色的方法

				
			

			

				

					吴冬雪的博客
				

				

					05-28
					
					844
					
				

			

		

		

			
				
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: #BDCADA;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #BDCADA;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: #BDCADA;
}
input:-ms-.

			
		

	





	

		

			

				
					
如何修改placeholder颜色？

				
			

			

				

					m0_46639734的博客
				

				

					04-23
					
					8961
					
				

			

		

		

			
				
我们需要修改input框中的placeholoder字体或者颜色如果我们直接给input设置class类，写入color颜色，我们会发现修改的颜色是input框中输入字体的颜色。以上就是今天要讲的内容。

			
		

	





	

		

			

				
					
HTML5 input placeholder 颜色修改示例

				
			

			

				

					09-28
				

			

		

		

			
				
在一些现代浏览器中，可以通过CSS的伪元素和伪类来实现对placeholder颜色的控制。不过，在不同浏览器中，所使用的伪类和伪元素可能不同。以下是一些常见的浏览器及其对应的伪元素和伪类选择器：  1. WebKit和Blink...

			
		

	





	

		

			

				
					
让低版本浏览器支持input的placeholder属性(js方法)

				
			

			

				

					10-27
				

			

		

		

			
				
 // 设置输入框的值为placeholder文本，并改变颜色和行高  me.val(ph).css('color', '#aaa').css('line-height', me.css('height'));  }    // 当输入框获得焦点时，事件监听器  me.on('focus', function() {  // ...

			
		

	





	

		

			

				
					
通过js修改input、select默认字体颜色

				
			

			

				

					10-19
				

			

		

		

			
				
`.setDefauleValue()`方法首先设置`input`元素的默认值，并通过`.css()`方法设置默认值的字体颜色，然后使用`.focus()`和`.blur()`事件处理函数来根据元素是否有焦点或者是否有输入内容来改变字体颜色。  对于`...

			
		

	





	

		

			

				
					
input  修改placeholder颜色

				
			

			

				

					weixin_30279315的博客
				

				

					08-02
					
					147
					
				

			

		

		

			
				
<input class="user-input" type="text" value="" placeholder="请输入你的昵称" maxlength="5">
修改placehoder字体颜色，
input::-webkit-input-placeholder {   color: #fff;}input:-moz-placeholder {   color: #fff;}...

			
		

	





	

		

			

				
					
文本域与input窗口中 修改placeHolder 颜色

				
			

			

				

					java_goodstudy的博客
				

				

					05-18
					
					1759
					
				

			

		

		

			
				
在input 窗口中 
input::-webkit-input-placeholder {
    color:#aaa;
}    在textarea中
.suggest-text::-webkit-input-placeholder {
    color: #6b6b6b;
}

			
		

	





	

		

			

				
					
修改input的placeholder样式(改颜色)

				
			

			

				

					hello world
				

				

					01-13
					
					788
					
				

			

		

		

			
				
【代码】修改input的placeholder样式(改颜色)

			
		

	





	

		

			

				
					
修改input里placeholder颜色

				
			

			

				

					AmberWu
				

				

					02-07
					
					4万+
					
				

			

		

		

			
				
2017年第一天上班！ 
开工大吉！
 
  html   
 如下：
 
 Chrome支持input=[type=text]占位文本属性    所以，对下面这段代码并不起作用，另外，!important只有IE7和firefox能识别！input[placeholder], [placeholder], *[placeholder] { 
color:#333 !important

			
		

	





	

		

			

				
					
如何修改input placeholder的文字颜色

				
			

			

				

					HaushoLin的博客
				

				

					11-25
					
					602
					
				

			

		

		

			
				
如何修改input placeholder的文字颜色。

			
		

	





	

		

			

				
					
如何修改input的placeholder的文字颜色

				
			

			

				

					io_123io_123的博客
				

				

					09-05
					
					7965
					
				

			

		

		

			
				
如何修改input的placeholder的文字颜色

			
		

	





	

		

			

				
					
如何更改input中placeholder的颜色

				
			

			

				

					foreverlikui的博客
				

				

					11-23
					
					4万+
					
				

			

		

		

			
				
示例：

更改前：



更改后：



在我们经常写input时，我们一般都是使用placeholder的颜色，但是看起来真的很戳，当美工给我们设计了一个精美的input背景时，placeholder的内容就很难看清楚，我们就要对其进行更改颜色。

但是我们对input的color更改成其它颜色时，只会对input输入的内容进行赋值颜色，而placeholder还是默认颜色。

我们可以这样对它...

			
		

	





	

		

			

				
					
修改input的placeholder字体颜色

				
			

			

				

					橙-极纪元-JJYCheng
				

				

					11-21
					
					1380
					
				

			

		

		

			
				
效果





html


<input type="text" class="name inputProgramColor" placeholder="请输入用户名"/>

css


input.inputProgramColor::-webkit-input-placeholder{ 
    color:  rgba(255, 255, 255, 0.5); 
    } 
    input.inputProgramColor:-moz-placeholder{ 
    colo.

			
		

	





	

		

			

				
					
改变input placeholder 的颜色

				
			

			

				

					yiyingcsdn的博客
				

				

					12-14
					
					9465
					
				

			

		

		

			
				
改变input placeholder 的颜色

			
		

	





	

		

			

				
					
input中placeholder改变字体颜色

				
			

			

				

					05-18
				

			

		

		

			
				
可以通过CSS样式来实现修改placeholder字体颜色的效果。以下是一个示例代码： ...这里使用了伪类选择器 `::placeholder` 来选择input元素的placeholder，然后设置它的颜色为红色。你可以根据需要修改颜色值。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值