苹果iphone手机上input的button按钮颜色显示有问题，安卓却没问题

最新推荐文章于 2024-08-06 09:51:20 发布
最新推荐文章于 2024-08-06 09:51:20 发布
阅读量498 收藏
点赞数
本文介绍了一种简单的方法来消除iOS设备中按钮的默认样式，通过使用-webkit-appearance:none;样式属性，可以让按钮在iOS和安卓设备上的显示效果保持一致。

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

苹果手机中会如类似上图，安卓却可以按自己写的来显示

解决办法：

-webkit-appearance: none;

 以上即可，当然样式中可以加上通用的：

通用：
input[type=button], input[type=submit], input[type=file], button {-webkit-appearance: none; }

 


                

        




    

    
  


            

                    
            


    

      

        

            

              
                
                  _miccretti
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
uniapp - 实现移动端H5网页唤起APP流程及示例代码，uniApp实现h5页面唤醒app功能，如何实现点击按钮跳转打开本机第三方应用和检测打开外部应用（兼容安卓android+苹果ios系统）

				
			

			

				

					资深程序员
				

				

					05-07
					
					1万+
					
				

			

		

		

			
				
uniapp，手机h5网页平台端，微信公众号h5，H5如何实现唤起APP，h5唤起App方案，微信内H5页面唤醒App，通过h5页面跳转至对应的app页面，h5网页检测手机是否安装了app，uniapp h5页面唤醒app，H5界面打开唤醒移动端APP应用程序，uniapp H5唤起手机App中间下载页，唤起页面没反应，ios无法打开外部应用，解决H5页面无法直接唤起App，跳转没反应也不报错，h5页面唤醒app如果手机没有此app跳转到下载页，H5跳转APP无效没反应，H5跳转APP为什么跳转不了，sch

			
		

	



                

            
              



	

		

			

				
					
详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

				
			

			

				

					12-14
				

			

		

		

			
				
前两天在开发在微信访问的HTML5页面，里面有个订单查询要选择时间，刚开始使用的<input type="date">输入框，没加任何的样式，效果是白色的背景再加上边框很丑，完全与整个背景不协调。
刚开始设置了输入框背景色透明（background-color:transparent;），在iOS上面背景色和边框都没有了，但是在andriod上边框和背景色还是存在。后来加上样式FILTER: alpha(opacity=0)，在andriod中就去掉了边框和背景。
去掉背景和边框比以前好看多了，但是因为类型是date,所以右边有个图标，感觉不协调，加上appearance:none;样式图标没

			
		

	



              


  
              

                


	

		

			

				
					
苹果手机上input的button按钮颜色显示问题

				
			

			

				

					weixin_43294092的博客
				

				

					07-01
					
					322
					
				

			

		

		

			
				
苹果手机上input的button按钮颜色显示问题
在手机页面上写了个input的button按钮，但是颜色发白的解决方法为，css中加上
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 

在苹果手机上的input按钮自带效果，需要加上outline:0px; -webkit-appearance:none; 清除原有样式，同时苹果

			
		

	





	

		

			

				
					
解决苹果手机按钮颜色与安卓机不一致的问题

				
			

			

				

					小男人的博客
				

				

					01-03
					
					3698
					
				

			

		

		

			
				
解决苹果手机与安卓机不一致的问题
依次是：标注图，安卓手机，苹果手机

1.按钮的颜色不一致
在按钮的属性后面加上该样式
input[type=button], button { cursor: pointer; -webkit-appearance: none; }

2.文本框的占位文本设置样式
::-webkit-input-placeholder {
        color: #999...

			
		

	



		

			
		



	

		

			

				
					
解决CSS设置按钮背景透明后在安卓手机上看却失效的问题

				
			

			

				

					weixin_42216142的博客
				

				

					03-22
					
					2737
					
				

			

		

		

			
				
项目里面做的APP提测试了，今天测试提了一个bug，是说我的会员卡右下角的按钮背景颜色与文字偏离了。
而我根据我们UI的设计做的是设置了按钮背景颜色透明，之前也都在几个手机上测试过没遇到这个问题。
测试遇到这个bug显然是我做的有问题的，
后来我找来同事的安卓手机，然后发现我设置的背景颜色透明失效了…
我做的以及我手机看到的效果如下：

安卓手机看到的效果如下：

我设置按钮背景透明度的代码(问题...

			
		

	





	

		

			

				
					
去除IOS苹果手机自带按钮样式的方法(推荐)

				
			

			

				

					01-20
				

			

		

		

			
				
如下所示：  input[type=button], input[type=submit], input[type=reset]...以上这篇去除IOS苹果手机自带按钮样式的方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	





	

		

			

				
					
苹果iPhone safari浏览器样式重置修复submit按钮圆角bug

				
			

			

				

					09-25
				

			

		

		

			
				
苹果的iPhone设备使用Safari浏览器作为其默认的网页浏览工具，而Safari在处理某些CSS样式时，可能会出现与其它浏览器不一致的问题。这个问题在处理表单元素，特别是`submit`按钮时尤为突出，即所谓的“圆角bug”。  ...

			
		

	





	

		

			

				
					
h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新

					
最新发布

				
			

			

				

					Beatingworldline的博客
				

				

					08-06
					
					1728
					
				

			

		

		

			
				
在站外拉起APP  可以用UniversalLinks。在站外拉起APP  可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。

			
		

	





	

		

			

				
					
iPhone风格的CSS3开关按钮设计分享

				
			

			

				

					
				

			

		

		

			
				
在移动应用界面设计中，开关按钮（toggle button）是常用的一种交互元素，它允许用户通过简单的滑动来开启或关闭某个功能。随着HTML5和CSS3技术的快速发展，现在我们可以仅使用前端技术来实现复杂的UI组件，包括模仿...

			
		

	





	

		

			

				
					
安卓和苹果按钮颜色不同解决方案

				
			

			

				

					mayzhangmeimei的博客
				

				

					03-06
					
					1435
					
				

			

		

		

			
				
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
 -webkit-appearance: none;
 }

			
		

	





	

		

			

				
					
微信小程序颜色在手机端不显示问题

				
			

			

				

					月落星河
				

				

					04-02
					
					2985
					
				

			

		

		

			
				
有时候我们在微信小程序端写的颜色，有时候预览的时候再手机端不会显示颜色，是因为颜色进制的问题，可以改成8进制的颜色



			
		

	





	

		

			

				
					
Android问题Button控件中文字无法显示

				
			

			

				

					Zachary的基地
				

				

					06-12
					
					5595
					
				

			

		

		

			
				
今天修改完功能之后，交给测试人员去测试，恰巧遇到了按钮无法显示上面的文字，而且是部分的手机上无法显示。

根据网上文章的推测:（莫名其妙）

1.修改手机的字体问题

2.设置gravity中的center问题。

3.旁边的控件背景覆盖了其上的文字

4.背景的颜色和文字颜色相同的原因

5.设置颜色并未成功，设置的正确方法自行百度。

因为问题在部分手机出现，也可能是自己布局水平的问题。

可...

			
		

	





	

		

			

				
					
CSS 消除ios点击按钮时出现的一个半透明的灰色背景

				
			

			

				

					weixin_30915275的博客
				

				

					06-28
					
					321
					
				

			

		

		

			
				
解决
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
注：webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。


转载于:https://www.cnblogs.com/yanjiez/p/11101915.html...

			
		

	





	

		

			

				
					
Android和ios微信浏览器中按钮显示不一样的问题

				
			

			

				

					kekeqi123的博客
				

				

					07-08
					
					1767
					
				

			

		

		

			
				
在按钮的样式里面加上：
    
-webkit-appearance : none ;


http://www.cnblogs.com/qiongmiaoer/p/3573211.html

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值