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                                       选取时间、日 月、年的输入域(本地时间)


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

相关文章
|
23天前
textarea文本框根据输入内容自动适应高度
textarea文本框根据输入内容自动适应高度
12 0
|
5月前
|
前端开发
CSS:去除input和button边框以及选中时边框默认样式
CSS:去除input和button边框以及选中时边框默认样式
|
6月前
|
前端开发
input框点击时去掉默认的外层边框
input框点击时去掉默认的外层边框
28 0
|
6月前
|
前端开发 数据安全/隐私保护
CSS去掉input框里面的默认字体颜色
CSS去掉input框里面的默认字体颜色
105 1
|
6月前
|
前端开发
css去掉input框里面的默认颜色
css去掉input框里面的默认颜色
45 0
|
6月前
textarea去掉边框和取消选中后的边框
textarea去掉边框和取消选中后的边框
|
6月前
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
118 0
|
8月前
|
前端开发
css只改变input输入框光标颜色
css只改变input输入框光标颜色
|
8月前
|
前端开发
css只改变input输入框光标颜色不改变文字颜色实现方法
css只改变input输入框光标颜色不改变文字颜色实现方法
|
Web App开发 前端开发
去掉谷歌默认的input textarea边框样式
谷歌浏览器Chrome基于WebKit开源浏览器引擎,自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后,大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的,但是当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得套样了!
122 0