制作button和input的tips

最新推荐文章于 2022-10-20 13:37:30 发布
最新推荐文章于 2022-10-20 13:37:30 发布
阅读量652 收藏
点赞数
分类专栏： JavaScript 文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wushang1102/article/details/108919672
版权
本文介绍了如何使用CSS来美化button和input元素，包括设置outline、cursor和border-radius等属性。同时，通过JavaScript实现简单的交互功能，如切换登录方式和按钮状态变化。文章以仿写B站登录界面为例，利用onclick、onmouseover和onmouseout事件实现功能。
摘要由CSDN通过智能技术生成

button
outline 设置为none
cursor pointer，鼠标over时显示为手指


input
border 设置边框颜色
border-radius 设置圆角
outline-color 设置鼠标点击时的边框颜色

可以用js写简单触发事件

比如切换登录方式
密码登录
短信登录
这里是仿写b站登录界面的输入框
实现方法是写两个div且隐藏其中一个，当点击按钮时，把原先隐藏的显示，原先显示的隐藏。同时按钮会变蓝。
用到onclick事件

<button id="mima-button" class="button" onclick="mima()">密码登录</button> 
<button id="duanxin-button" class="button" onclick="duanxin()">短信登录</button>


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  软烟盒
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能

				
			

			

				

					10-15
				

			

		

		

			
				
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {  -webkit-appearance: none; } input[type='number'] {  -moz-appearance: textfield; } ```  这段代码通过 `-webkit-appearance` 和 `-moz-...

			
		

	



                

              
                



	

		

			

				
					
HTML+CSS Tips

				
			

			

				

					qq_45596525的博客
				

				

					07-12
					
					179
					
				

			

		

		

			
				
1.border : 宽度 线形  颜色
2. placeholder : 提示文本 (input框中)
3. margin是所有块级元素都可以使用的属性
4. 当颜色的16进制数有两位相同 ,可以只写一位
如 : #ff0000  可以写作 #f00
5.使用通配取消标签默认的内外边距
*{
	margin :0;
	padding :0;
}

6.白嫖别人网站里的颜色参数?
右键–>检查–>找到style里的backgroundcolor–>把吸管工具点成蓝色
–>选中要白嫖的

			
		

	



                


  
              

                


	

		

			

				
					
【前端】小tips：解决input标签的自动填充背景问题且可以更改字体颜色（适用于Google等较高版本浏览器）

				
			

			

				

					rensheng2020的博客
				

				

					01-17
					
					1436
					
				

			

		

		

			
				
解决input标签的自动填充背景问题且可以更改字体颜色。

			
		

	





	

		

			

				
					
antd 表单中的输入框使用Tooltip组件

				
			

			

				

					agua001的博客
				

				

					10-11
					
					5280
					
				

			

		

		

			
				
1、有时项目中会遇到表单中某个表单项的内容过多而导致展示不完整，如图：

2、使用Tooltip组件
html:
<a-col :xxl="8" :xl="12" :sm="24" class="ex-item">
  <a-tooltip>
    <template slot="title">
      {{ tipsTxt }}
    </template>
    <a-form-item label="信号质量：">
      &l

			
		

	



		

			
		



	

		

			

				
					
Layui解决layer的tips无法吸附input元素的问题

				
			

			

				

					Dexter's Laboratory
				

				

					09-11
					
					1928
					
				

			

		

		

			
				
在使用layer.tips()对同样使用Layer渲染的表单input控件进行吸附时,如果直接传入input对应的id或其他css选择器,由于Layer在进行二次渲染的时候会隐藏原始的input标签,用新的div层进行替换显示,所以会导致layer的tips提示框无法正确吸附到上面,解决方法是在对input控件进行事件监听,在回调函数中初始化layer.tips,示例代码:
// 算法切换
    form.on('radio', function (data) {
        // 显示算法公式tip

			
		

	





	

		

			

				
					
tips-tricks:一些有趣的东西可以阅读和学习

				
			

			

				

					07-24
				

			

		

		

			
				
4. **表格与表单**：学习`<table>`，`<tr>`，`<td>`，`<th>`用于创建表格，以及`<form>`，`<input>`，`<button>`，`<select>`，`<textarea>`等元素用于创建交互式表单。  5. **响应式设计**：利用`...

			
		

	





	

		

			

				
					
网页制作完全手册

				
			

			

				

					09-05
				

			

		

		

			
				
<input type=button value="Start" onclick="runWaypoint(Item1, 0, 1); runWaypoint(Item2, 0, 1);"> <div id=Debug>Generation    // need to call initializePath on all objects that will be moved with this ...

			
		

	





	

		

			

				
					
jQuery EasyUI 扩展(tip和form)

				
			

			

				

					08-15
				

			

		

		

			
				
<input type="text" name="username" required="true" class="easyui-validatebox" data-options="required:true,validType:'length[6,20]'" /> ```  在这个例子中，用户名字段不仅被设为必填，还要求长度在6到20个...

			
		

	





	

		

			

				
					
jquery随鼠标移动的提示插件

				
			

			

				

					05-23
				

			

		

		

			
				
本文将详细探讨“jQuery随鼠标移动的提示插件”，该插件广泛应用于各种元素，如`<a>`标签、`<input>`、`<button>`以及表格元素，提供灵活且实用的提示功能。  一、jQuery基础  在深入插件之前，我们需要对jQuery有...

			
		

	





	

		

			

				
					
silverlight中的button 使用之tips

				
			

			

				

					weixin_34024034的博客
				

				

					04-05
					
					81
					
				

			

		

		

			
				
1、silverlight 中的button 是没有 MouseLeftButtonDown 和 MouseLeftButtonUp 事件 的。因为SL在ButtonBase类中，已经将这两个事件的 e.Hanlder 设为ture了。所以不会引用这两个事件，如果要使用单击事件，请使用 Click
2、button 模板中的ContentPresentation 可以装载一个容器，容器内可以装载...

			
		

	





	

		

			

				
					
jQuery.Tips

				
			

			

				

					zynj03315的专栏
				

				

					09-19
					
					739
					
				

			

		

		

			
				
body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,form,button,input,textarea,th,td{margin:0;padding:0;}
img{ -ms-interpolation-mode: bicubic;border:0}
ol,ul,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-siz

			
		

	





	

		

			

				
					
css的属性选择器的妙用，来用它实现一个轻量的tips组件吧

				
			

			

				

					小陈的博客
				

				

					10-20
					
					693
					
				

			

		

		

			
				
它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

			
		

	





	

		

			

				
					
css中attr是什么,css attr的使用

				
			

			

				

					weixin_30464195的博客
				

				

					08-04
					
					3012
					
				

			

		

		

			
				
经常有需要是，在用户输入错误的时候给用户进行提示，一般我们可能会在input的下面隐藏一个span，来进行提示，如果用dom操作它的text，这样做算是比较麻烦的，操作的对象多，有没有更加简单的方法呢？css 的attr给出了这种可能，attr可以获取某个元素的属性值#inputBox {position: relative;}#inputBox::after {content: attr(tip...

			
		

	





	

		

			

				
					
inputTip css+js

				
			

			

				

					lccccccccc的专栏
				

				

					08-27
					
					604
					
				

			

		

		

			
				
请输入预约码
                    
                    
                        if ($("#SubCode").val()) {
                            $("#SubCode").prev().hide();
                        }

			
		

	





	

		

			

				
					
表单input元素关闭自动填充小tip

				
			

			

				

					wendrewshay
				

				

					05-15
					
					582
					
				

			

		

		

			
				
在部分保存了登录信息的页面，聚焦类型为password的input元素时，会有自动填充出现，如下所示：




如果想关闭自动填充，以往的autocomplete="off" 属性设置在目前的浏览器似乎已经不起作用。
最近发现一个好用的设置，在部分浏览器有效，设置如下：


至于原因为何，大家可以参考文章：https://developer.mozilla.org/en-US/d

			
		

	





	

		

			

				
					
标签的一些属性：tip提示，长度限制，字母大小写

				
			

			

				

					wenbing756169311的专栏
				

				

					06-29
					
					1830
					
				

			

		

		

			
				
知识靠积累：
 


  Title属性：
  
  
  maxlength属性最多2个字符：
  
  
  字母自动转大写：


  字母自动转小写：

			
		

	





	

		

			

				
					
CSS小tips--button居中和css多类选择器

				
			

			

				

					萧墨的博客
				

				

					04-30
					
					740
					
				

			

		

		

			
				
button居中：在button外面包一个父容器，设置父容器的text-align: center




&lt;div class="buttonContainer"&gt;
    &lt;button class="toggleBtn"&gt;切换样式&lt;/button&gt;
&lt;/div&gt;


.buttonContainer{
    text-align: cent...

			
		

	





	

		

			

				
					
自定义表单input属性 检查必填

				
			

			

				

					Black Monkey
				

				

					04-18
					
					7285
					
				

			

		

		

			
				
  /**
 * js 提交前判断必填
 * 陈勇土
 * 用法 &lt;input type="text"  name="userCode" required-self="true" tips-self="请输入账号"  placeholder="请输入账号" maxlength="20" /&gt;
 */ 
 
 function checkSubmitRequire

			
		

	





	

		

			

				
					
这个代码<div class="web_login" id="web_login">                <div class="login-box"> 			<div class="login_form"> 				<div id="loginCue" class="cue">欢迎登录</div> 				<form action="login" name="loginform" accept-charset="utf-8" id="login_form" class="loginForm"                      method="post">                 <div class="uinArea" id="uinArea">                 <label class="input-tips" for="id">学号：</label>                 <div class="inputOuter" id="uArea">                     <input type="text" id="login-sn" name="sn" class="inputstyle" value=""/>                 </div>                 </div>                 <div class="pwdArea" id="pwdArea">                <label class="input-tips" for="pwd">密码：</label>                 <div class="inputOuter" id="pArea">                   <input type="password" id="pwd" name="password" class="inputstyle"/>                 </div>                 </div>                 	<div style="padding-left:50px;margin-top:20px;">                 	<button id="login_button"type="button" value="登 录" style="width:150px;" class="button_blue" href="javascript::">登录按钮</button>                 		<!-- <input id="login_button"type="submit" value="登 录" style="width:150px;" class="button_blue"/> -->                 	</div>               </form>            </div>            </div>               </div>能不能简写

					
最新发布

				
			

			

				

					05-25
				

			

		

		

			
				
 <label class="input-tips" for="id">学号：    <input type="text" id="login-sn" name="sn" class="inputstyle" value=""/>        <label class="input-tips" for="pwd">密码：    <input type="password" id=...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值