<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>H5 仿Bootstrap表单输入框焦点高光</title> <style type="text/css"> input, textarea { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border linear 0.2s, box-shadow linear 0.2s; } input, textarea, select { font-size: 1em; display: inline-block; padding: 4px; color: #555555; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 3px; margin: 3px 0; } /* 获得焦点时的输入框高光效果 */ input:focus, textarea:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } /* 避免对其他元素的不良影响(主要表现在IE浏览器中) */ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; box-shadow: none; } input[type="image"], input[type="checkbox"], input[type="radio"] { padding: 0; margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; background-color: transparent; border: 0 \9; /* IE9- */ border-radius: 0; } /* 避免对按钮样式的不良影响 */ input[type="button"], input[type="submit"], .btn { display: inline-block; *display: inline; padding: 4px 10px; font-size: 1em; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); cursor: pointer; background-color: #f5f5f5; *background-color: #e6e6e6; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; border: 1px solid #cccccc; *border: 0; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-bottom-color: #b3b3b3; border-radius: 4px; filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); *zoom: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } </style> </head> <body> 姓名:<input type="text" /><br /> 密码:<input type="password" /><br /> 复选框:<input type="checkbox" /><input type="checkbox" /><br /> 单选框:<input type="radio" /><input type="radio" /><br /> <textarea></textarea><br /> <input type="file" /><br /> <input type="image" src="btn.png" /><br /> <input type="button" value="重置" /> <input type="submit" value="提交" /> </body> </html>
这个是通过手机上查看的效果图:
相关推荐
5套H5+bootstrap框架写的后台管理模板
这是一款基于Bootstrap4的标签输入框插件。该插件使用Bootstrap 4 badge组件来制作标签输入和移除的效果。
这是一款Bootstrap4数值输入插件。通过该插件可以非常轻松的将input元素转换为数值输入spinner。
我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。 使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。 最后,我们...
BsMultiSelect.js是一款Bootstrap4带多选功能输入框组件。BsMultiSelect.js扩展了原生bootstrap4 input输入框,可在输入框中通过下拉框来选择多个输入内容。
Bootstrap响应式输入框表单验证代码基于Bootstrap3.3.5制作,响应式设计,自适应分辨率,兼容PC端和移动端,有9种输入框表单验证功能:1.文本框只能输入数字代码(小数点也不能输入);2.只能输入数字,能输小数点;3....
使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件。 <link rel="stylesheet" href=...
主要为大家详细介绍了bootstrap输入框组的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Bootstrap响应式输入框表单验证代码.zip
bootstrap表单验证
通过爬虫技术,获取的源BootStrap4模板——Hyper - Responsive Bootstrap 4 Admin Dashboard。这里有条件的同学或作商业用途的可以去官网里购买仅需48$,该资源仅供BootStrap4的相关学习交流。 建议打开方式:用...
bootstrapvalidator 表单验证bootstrapvalidator 表单验证bootstrapvalidator 表单验证bootstrapvalidator 表单验证
17.Bootstrap输入框.rar
对于刚开始使用bootstrap前台框架的朋友来说,表单验证或许是必不可少的。本案例中有常见的格式校验公大家参考,好不容易找到了,给需要的朋友分享一下,不需要积分,有个csdn账号即可,免去积分下载的困扰
bootstrap表单验证插件,简易配置参数,即可验证表单,非常好用,欢迎下载。
bootstrap input 框 清除 小插件、很简单的一个小的js,引入即可。省时省力。
html5+bootstrap网页源码,分享大家学习,Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
一款不错的基于bootstrap表单登录模板