HTML圆角输入框

最新推荐文章于 2022-07-12 11:23:41 发布
最新推荐文章于 2022-07-12 11:23:41 发布
阅读量2.4k 收藏 1
点赞数
Technorati 标签: CSS3, CSS, HTML, 圆角

这段时间做项目，美工设计的界面输入框都是圆角的，确实很好看，研究了一下，实现起来真还有些麻烦

firefox，safri，chrome这些浏览器基本都一定程度支持新的CSS3标准，可以用CSS来搞定圆角：

 
 
  1: border-radius: 5px; /* css 3标准 */

 
 
  2: -moz-border-radius: 5px; /* mozilla */

 
 
  3: -webkit-border-radius: 5px; /* webkit */
可是M$的IE就麻烦了， 直道IE9 还没完整支持CSS3，就只能用背景图片法，前后补图法等等，来模拟圆角效果了 
 哭泣的脸 


                

        

        




    




    

      

        

            

              
                
                  daviszhao121
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
java Web div，input边框圆角

				
			

			

				

					12-02
				

			

		

		

			
				
边框圆角,直接掉方法就可以用,和jquery类似！

			
		

	



                

              
                



	

		

			

				
					
HTML的文本框椭圆

				
			

			

				

					weixin_52213919的博客
				

				

					11-04
					
					668
					
				

			

		

		

			
				
然后代码：border-radius。

			
		

	



                


  
              

                


	

		

			

				
					
html怎么设置椭圆文本框,怎么用PPT制作椭圆形的文本框 PPT椭圆形文本框设置教程...

				
			

			

				

					weixin_35318343的博客
				

				

					06-03
					
					947
					
				

			

		

		

			
				
在使用PPT软件的过程中，如果我们想用PPT制作椭圆形的文本框，如何制作?方法很简单，下面教程之家网为大家带来PPT椭圆形文本框的设置教程，不会制作的朋友可以参照教程尝试下。怎么用PPT制作椭圆形的文本框1、点击PowerPoint2016开始选项卡绘图功能区图示的下拉按钮。2、在下拉列表中点击选择椭圆图形。3、按住鼠标左键拖动鼠标画出椭圆。4、在椭圆的边框线上点击鼠标右键，再点击右键菜单中的【设...

			
		

	





	

		

			

				
					
去掉ios中html的input元素显示圆角问题

				
			

			

				

					xiejunna的博客
				

				

					01-25
					
					3268
					
				

			

		

		

			
				
-webkit-appearance: none;border-radius: 0;

			
		

	



		

			
		



	

		

			

				
					
html怎么设置椭圆文本框,html – 避免CSS border-radius中的椭圆形状

				
			

			

				

					weixin_39542710的博客
				

				

					06-03
					
					2764
					
				

			

		

		

			
				
形式上,border-radius属性的语法为每个角接受2个值：垂直半径和水平半径(用斜杠分隔).以下行将创建一个类似于上面第三个图像的椭圆边框半径.border-radius: 5px/10px;通常,我们只指定一个值.在这种情况下,该值被用作垂直和水平半径.以下行将创建一个类似于上面第二个图像的圆形边框半径.border-radius: 10px;使用百分比Denotes the size o...

			
		

	





	

		

			

				
					
iecss3.htc支持输入框圆角

				
			

			

				

					06-19
				

			

		

		

			
				
在网页设计中，为了实现美观的效果，经常需要用到CSS3中的圆角边框（border-radius）属性，让元素的四个角落呈现出圆形或椭圆形的外观。然而，早期版本的Internet Explorer浏览器，尤其是IE8及以下版本，并不支持这...

			
		

	





	

		

			

				
					
好看的input输入框-合集-各种悬停、选中特效样式-HTML源码

				
			

			

				

					09-30
				

			

		

		

			
				
4. 其他可能的样式：资源包中可能还包括了其他创新的样式设计，如圆角输入框、边框过渡效果、自定义占位符颜色等，这些都能让输入框更加个性化和吸引人。  在实际应用中，这些预设的样式可以轻松地集成到任何HTML...

			
		

	





	

		

			

				
					
html-materialdesign风格输入框

				
			

			

				

					12-30
				

			

		

		

			
				
HTML Material Design风格输入框是一种遵循谷歌Material Design设计规范的网页元素，主要应用于创建具有现代感和一致用户体验的表单输入控件。Material Design是谷歌推出的一种界面设计语言，强调层次感、响应式交互...

			
		

	





	

		

			

				
					
多种漂亮炫酷的输入框特效

				
			

			

				

					12-04
				

			

		

		

			
				
本文将深入探讨如何使用HTML、CSS、JavaScript（包括jQuery和H5 API）来创建各种漂亮且炫酷的输入框特效，以提升用户体验，特别是在搜索页面中的应用。  首先，基础的HTML `input` 元素是构建所有输入框的核心。例如...

			
		

	





	

		

			

				
					
输入框特效

				
			

			

				

					05-19
				

			

		

		

			
				
1. 边框与圆角：通过CSS的border属性，我们可以设置输入框的边框宽度、颜色和样式，同时使用border-radius属性来创建圆角效果。 2. 背景色与阴影：background-color属性改变背景颜色，box-shadow属性添加阴影效果，...

			
		

	





	

		

			

				
					
登陆界面html外框圆角,关于html：CSS边框半径仅圆角模态div窗口的一个角

				
			

			

				

					weixin_36079559的博客
				

				

					06-07
					
					269
					
				

			

		

		

			
				
当我在模式div(在我的常规内容上方弹出的div)上使用border-radius属性时，四个角不会全部自身变圆。一个或两个角将倒圆，但不是全部四个。这是图像的链接，我还不能在Stack Overflow上发布图像(请注意图像的左上角)https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png我...

			
		

	





	

		

			

				
					
css文本变有圆角的输入框

				
			

			

				

					nailsea的博客
				

				

					11-13
					
					1211
					
				

			

		

		

			
				
光标在文本上时文本变为输入框，圆角+阴影效果，按照网上的例子，对文本加上
 .createFolderBorder{
    width:195px;
    border: 2px solid #ececec;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
 ...

			
		

	





	

		

			

				
					
设置html中input输入框的宽度、高度以及输入框的圆角

					
热门推荐

				
			

			

				

					YMYYZ的博客
				

				

					07-12
					
					2万+
					
				

			

		

		

			
				
设置html中input输入框的宽度、高度以及输入框的圆角border-radius

			
		

	





	

		

			

				
					
html 文本框css设置边框圆角

				
			

			

				

					weixin_30894389的博客
				

				

					12-21
					
					5165
					
				

			

		

		

			
				
html 文本框css设置边框圆角如下图：css代码如下：input{border:1px solid black;width:295px;height:40px;border-radius:25px;}
转载于:https://www.cnblogs.com/luckybaby519/p/10155516.html...

			
		

	





	

		

			

				
					
html设置input圆角矩形_html5中关于input使用方法的改变

				
			

			

				

					weixin_34710938的博客
				

				

					01-14
					
					1208
					
				

			

		

		

			
				
① url类型url类型的input元素是一种专门用来输入url地址的文本框。提交时假设该文本框中的内容不是url地址格式的文字，则不同意提交。非url提交时Firefox、Chrome 提示错误，Opera自己主动将url框中值转化为url格式，ie9和safari不支持，正常提交② email类型email类型的input元素是一种专门用来输入email的文本框。提交时假设该文本框中的内容不是...

			
		

	





	

		

			

				
					
HTML5实现的圆角框

				
			

			

				

					weixin_34377065的博客
				

				

					12-12
					
					1333
					
				

			

		

		

			
				
<!DOCTYPE html><html lang="zh-CN"><head><title>HTML5实现的圆角框_网页代码站(www.webdm.cn)</title><style type="text/css">body { width: 700px; margin: 40px auto; bord...

			
		

	





	

		

			

				
					
html网页中圆角边框的编写,Html实现边框圆角的实例详解

				
			

			

				

					weixin_36250086的博客
				

				

					06-28
					
					4278
					
				

			

		

		

			
				
这篇文章主要为大家详细介绍了html轻松实现圆角矩形的方法，告诉大家如何通过p+css以及定位来实现圆角矩形？感兴趣的小伙伴们可以参考一下问题：如何通过p+css以及定位来实现圆角矩形？解决方法概述：内容：首先在 body 标签内部里添加一个大层(大层用来固定整体大框架)，然后大层内包含四个小层(四个小层里分别放四个圆角(事先用ps做好椭圆形形状，然后用切片工具切图 ))样式：在 head 标签内...

			
		

	





	

		

			

				
					
html设置input圆角矩形_CSS+Jquery实现页面圆角框方法大全

				
			

			

				

					weixin_42107165的博客
				

				

					01-14
					
					1686
					
				

			

		

		

			
				
所以我就想用一个既方便调用又方便更新的方法来实现，结果如愿以偿。先将此技术点总结如下：在此之前我也寻找过目前网络上最流行的做法的实现方案，大体共总结出7种方法，但是发现他们的方法多多少少都存在缺陷，后来我自己做出了我自己觉得满意的方法。先看目前网络上最流行的7种做法：１，无图片纯css圆角框收录理由：兼容性强，不用图形图一特点：1.不用任何图形，使用很多个div容器模拟出圆角效果。2.兼容性：通杀...

			
		

	





	

		

			

				
					
html5文本框圆角,CSS3使用border-radius属性制作圆角

				
			

			

				

					weixin_39759890的博客
				

				

					06-03
					
					140
					
				

			

		

		

			
				
html复制代码代码如下:邮箱登录使用border-radius属性，制作圆角复制代码代码如下:/*CSS3.0圆角属性实现表单元素圆角*/.loginbox{background:#edf6ff;border-left:1px solid #acc3e3;border-right:1px solid #acc3e3;padding:20px;}.loginbox h2{color:#28456f...

			
		

	





	

		

			

				
					
html圆形密码输入框原生

					
最新发布

				
			

			

				

					12-25
				

			

		

		

			
				
HTML提供了一个原生的密码输入框，我们可以使用一些CSS和JavaScript来创建一个圆形的密码输入框。首先，我们可以使用CSS来设置输入框的样式，包括颜色、大小和形状。然后，我们可以使用JavaScript来监听用户输入，并在用户输入时显示圆形的密码字符。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .password-input {
      border: none;
      outline: none;
      background-color: lightgray;
      width: 200px;
      height: 40px;
      border-radius: 20px;
      text-align: center;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <input type="password" class="password-input">
  <script>
    const input = document.querySelector('.password-input');
    input.addEventListener('input', (e) => {
      const value = e.target.value;
      const length = value.length;
      const circlePassword = '●'.repeat(length);
      e.target.value = circlePassword;
    });
  </script>
</body>
</html>
```

在这个示例中，我们创建了一个圆形的密码输入框，并使用JavaScript监听用户的输入，将输入的文本替换为圆形的密码字符。这样就实现了一个简单的原生HTML圆形密码输入框。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值