placeholder 设置样式

最新推荐文章于 2022-06-18 17:20:23 发布
最新推荐文章于 2022-06-18 17:20:23 发布
阅读量326 收藏
点赞数
分类专栏： HTML/CSS 

::-moz-placeholder {
    color: mediumvioletred;
    text-indent: 5px; /* 没有用 */
    opacity: 1!important;
}
:-ms-input-placeholder {
    color: mediumvioletred;
    text-indent: 5px;
}
::-webkit-input-placeholder {
    color: mediumvioletred;
    text-indent: 5px;
}


即可


                

        

        

    

  


    

      

        

            

              
                
                  前端小白的江湖路
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
css自定义占位文本(placeholder)的样式的方法示例

				
			

			

				

					12-10
				

			

		

		

			
				
在网页设计中，为了给用户提供更好的交互体验，我们经常会在输入框(input)或文本区域(textarea)中设置占位文本(placeholder)，它是一种提示性文字，帮助用户了解应该输入什么样的内容。然而，有时我们可能希望自定义...

			
		

	



                

            
              



	

		

			

				
					
使用JS去设置placeholder的样式，你会吗？

				
			

			

				

					qq_41126463的博客
				

				

					09-28
					
					5357
					
				

			

		

		

			
				
**	今天有同学又双叒叕给我扔了一个王炸？又一次刷新我对bug的认知啊，看来我还是小看js了。**

接下来，我们来看看同学的问题？

很开心，同学们都叫我姐姐。

跑偏了，跑偏了。这个问题的答案是：“当然可以”。
首先，我们瞅瞅传统的CSS如何设置placeholder的样式：
 input::placeholder{
            color: tomato;
        }

::placeholder是一个伪类，也就是通过伪类的方式来设置。
接下来，让我们再看看JS怎么设置：
第一步：

			
		

	



              


  
              

                


	

		

			

				
					
设置placeholder属性样式的多种写法

				
			

			

				

					weixin_44484756的博客
				

				

					02-19
					
					2万+
					
				

			

		

		

			
				
如何设置placeholder的样式
      我们经常用到placeholder属性是在input标签里面，placeholder属性主要作用是让输入框有个提示的显示。
   &am

			
		

	





	

		

			

				
					
给input标签的placeholder属性添加样式

				
			

			

				

					guojing5721的专栏
				

				

					03-12
					
					2300
					
				

			

		

		

			
				
<style>
input::-webkit-input-placeholder { 
/* placeholder颜色 */ 
 color: #aab2bd; 
 /* placeholder字体大小 */ 
 font-size: 12px; 
 } 
input { 
 border: 1px solid red; 
}
</style>




备注：

::...

			
		

	



		

			
		



	

		

			

				
					
HTML input placeholder的样式设置

				
			

			

				

					Bonrui编程路
				

				

					01-12
					
					1万+
					
				

			

		

		

			
				
placeholder
兼容写法：

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pi

			
		

	





	

		

			

				
					
css如何设置input的placeholder样式

				
			

			

				

					qq_17355709的博客
				

				

					06-18
					
					9421
					
				

			

		

		

			
				
如何设置input元素placeholder的样式

			
		

	





	

		

			

				
					
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

				
			

			

				

					08-28
				

			

		

		

			
				
在wxml文件中，使用view标签和div标签来定义按钮的样式和布局，并使用bindtap事件绑定placeholder函数来实现按钮的点击事件。每个span标签都绑定了placeholder事件，并通过data-num、data-key和data-val属性来传递...

			
		

	





	

		

			

				
					
实现placeholder效果的方案汇总

				
			

			

				

					09-03
				

			

		

		

			
				
在这个方案中，`<input>`元素的`value`属性初始设置为提示文本，同时添加一个自定义属性`phText`来存储提示内容。当用户聚焦输入框时，如果`value`与`phText`相同，说明尚未输入，于是清空`value`；失去焦点时，如果...

			
		

	





	

		

			

				
					
HTML5 placeholder属性详解

				
			

			

				

					09-28
				

			

		

		

			
				
对于样式美化，`placeholder`属性的提示文字默认样式通常较淡，有时需要通过CSS进行调整。但是，不同浏览器对`placeholder`的样式支持有所不同。例如，Webkit内核的浏览器（如Chrome和Safari）和Firefox 19+使用以下...

			
		

	





	

		

			

				
					
HTML5 input placeholder 颜色修改示例

				
			

			

				

					09-28
				

			

		

		

			
				
因此，最好是在不冲突的情况下单独对各个浏览器的伪类或伪元素设置样式，以避免整体打包样式带来的失效问题。  此外，某些情况下，比如使用了jQuery的placeholder插件，可能无法正常工作，这可能是因为插件与CSS样式...

			
		

	





	

		

			

				
					
input placeholder属性 样式修改(颜色,大小,位置)

				
			

			

				

					wwf1225的博客
				

				

					05-16
					
					1万+
					
				

			

		

		

			
				
input placeholder属性 样式修改(颜色,大小,位置)

placeholder属性 样式修改



placeholder-style="font-size: 2upx; color: red;"




 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8...

			
		

	





	

		

			

				
					
前端----HTML/CSS 修改placeholder的颜色

					
热门推荐

				
			

			

				

					nO0b
				

				

					09-24
					
					2万+
					
				

			

		

		

			
				
 

 

placeholder这个属性是HTML5中新增的属性，作用是描述输入字段预期值的提示信息

如何修改placeholder的颜色呢?

但是存在一定的浏览器兼容问题,以chorme为例:


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;style&gt...

			
		

	





	

		

			

				
					
placeholder设置样式

				
			

			

				

					xy19950125的博客
				

				

					01-14
					
					1828
					
				

			

		

		

			
				

::-webkit-input-placeholder {
     color: #797979;
    }
   

 

			
		

	





	

		

			

				
					
placeholer属性修改

				
			

			

				

					weixin_30727835的博客
				

				

					12-10
					
					392
					
				

			

		

		

			
				
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ *...

			
		

	





	

		

			

				
					
FireFox下placeholder设置

				
			

			

				

					lu900618的专栏
				

				

					11-14
					
					1436
					
				

			

		

		

			
				
<style>
    /* chrome */
    input::-webkit-input-placeholder {
      color: #fff;
      line-height: 50px;
    }    /* Firefox旧版本*/
    input:-moz-placeholder {
      color: #fff;
      line-height: 5

			
		

	





	

		

			

				
					
为什么在Firefox里placeholder的颜色比设置的代码浅， 比其他浏览器浅

				
			

			

				

					莫小猪的菜鸟进阶路
				

				

					03-30
					
					1791
					
				

			

		

		

			
				
今天在开发的时候突然发现在Firefox下设置的placeholder颜色不是代码设置的颜色。本着码农朴实的精神，我先检查下是不是写错了。 毕竟各大浏览器都坚持以自我为中心，其他为goushi的精神。 坚持要苦逼的前端写不同兼容的代码。 但是不管姑奶奶我怎么改， 代码是生效了， 颜色是改了。 就是取色器取出来的不是宝宝设置的颜色呀（此处一脸懵逼）。心里好气， 可是还是要保持微笑。 这TM怎么过测试...

			
		

	





	

		

			

				
					
placeholder样式修改，多浏览器兼容

				
			

			

				

					woyaoshengzhang的博客
				

				

					03-06
					
					6056
					
				

			

		

		

			
				
1、Chrome、Safari 、Opera浏览器


input::-webkit-input-placeholder{
color:#fff;
}

2、火狐浏览器


input::-moz-placeholder{
color:#fff;
}

3、IE浏览器


input:-ms-input-placeholder{
color:#fff;
}


...

			
		

	





	

		

			

				
					
placeholder文字设定样式

				
			

			

				

					小记心得
				

				

					08-04
					
					1万+
					
				

			

		

		

			
				
placeholder占位符文字，也可以设置对应的颜色，透明度等样式，具体如下：
/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:#ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#ccc;
}

			
		

	





	

		

			

				
					
css中修改placeholder的样式

				
			

			

				

					weixin_34370347的博客
				

				

					03-27
					
					2069
					
				

			

		

		

			
				
/*placeholder样式-开始*/
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{/*MozillaFirefox19+*/
color:red;
...

			
		

	





	

		

			

				
					
如何给input placeholder设置样式

					
最新发布

				
			

			

				

					06-03
				

			

		

		

			
				
您可以使用CSS来设置input元素中placeholder的样式。以下是一个示例CSS代码：  ```css ::placeholder {  color: red;  font-size: 14px;  font-weight: bold; } ```  在上面的代码中，我们使用了伪类 `::placeholder...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值