input输入时的边框样式去除

简介: input输入时的边框样式去除

很多程序员在写项目过程中,会遇到input的边框样式去除问题。今天我们就研究一下,有什么办法解决这个问题?

一般的,我们会给input设置:

          input{
        border: none;  
      }

这种方法,我们去除的是显示样式,但是输入的时候,我们需要点击一下input框,发现还是有一个黑色的初始化边框:
这种情况,怎么处理?

我们可以通过focus选择器来实现

去除文本输入框的样式:

input[type=text]:focus {
        outline: none;
      }

去除密码输入框的样式:

input[type=password]:focus {
        outline: none;
      }

简而言之,type=input的哪种类型,就去除哪种样式

最后的效果如下:以下是常见的input框的type不同的值

text                                                         默认的输入类型。


password                                               密码输入框,表现为一连串的点。


file                                                          文件上传控件


radio                                                       单选按钮


checkbox                                                复选框


hidden                                                    隐藏的输入字段,用于在表单中添加对用户不可见


button                                                     按钮


image                                                     图像形式的提交按钮


reset                                                       重置按钮,清除表单中所有数据


submit                                                    提交按钮,提交按钮会把表单数据发送到服务器


color                                                       调色板


tel                                                           包含电话号码的输入域


email                                                      包含email地址的输入域


url                                                           包含URL地址的输入域


search                                                    搜索域


number                                                  包含数值的输入域


range                                                     包含一定范围内数字值的输入域


date                                                       选取日、月、年的输入域


month                                                    选取月、年的输入域


week                                                     选取周、年的输入域


time                                                       选取月、年的输入域


datetime                                                选取时间、日 月、年的输入域(UTC时间)


datetime-local                                       选取时间、日 月、年的输入域(本地时间)


到这,我们遇到的问题已经得到了解决,但是学习这种事,要举一反三,更要善于总结,要深挖。你说呢?

相关文章
|
JavaScript 前端开发 搜索推荐
【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解
【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解
1742 0
【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解
|
存储 监控 NoSQL
第4期 MongoDB配置用户名密码认证登录
MongoDB配置用户名密码认证登录
3733 0
|
Shell Docker 容器
docker安装 shell脚本自动化安装
docker安装 shell脚本自动化安装
744 1
|
运维 JavaScript CDN
10个国内外jQuery的CDN性能大比拼
10个国内外jQuery的CDN性能大比拼
10个国内外jQuery的CDN性能大比拼
|
10月前
|
Ubuntu Linux 数据安全/隐私保护
Ubuntu20.04下修改samba用户密码
在 Ubuntu 20.04 上,修改 Samba 用户密码是一个简单而常见的管理任务。通过正确安装和配置 Samba,并使用 `smbpasswd` 命令,可以方便地管理 Samba 用户及其密码。本文提供了详细的步骤和示例,帮助您顺利完成这些操作。希望这些信息对您有所帮助。
514 16
|
11月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
418 5
|
域名解析 弹性计算 安全
阿里云域名注册到备案再到解析详细流程
本文主要讲解域名的注册,备案和解析流程,帮小白轻松搞定域名全流程
|
存储 缓存 运维
5 分钟完成 ZooKeeper 数据迁移
MSE 提供了多种数据迁移的方案,其中主流的方案可以通过 MSE Sync 进行实时同步,这样能够达到平滑不停机的目的,本文将介绍另外一种数据迁移的方式,主要针对业务支持停机的场景,进行一个补充,操作相比更加简单快速。
5 分钟完成 ZooKeeper 数据迁移
|
存储 前端开发 JavaScript
rsa前端加密后端解密的使用
rsa前端加密后端解密的使用
497 0