很多程序员在写项目过程中，会遇到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                                       选取时间、日月、年的输入域(本地时间)

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

input输入时的边框样式去除相关推荐

HTML 怎么取消文本框的输入时的边框？
HTML 怎么取消文本框的输入时的边框: 请查看: http://yayihouse.com/yayishuwu/chapter/2212
html边框样式不对,科技常识：HTML5 canvas画矩形时出现边框样式不一致的解决方法...
今天小编跟大家讲解下有关HTML5 canvas画矩形时出现边框样式不一致的解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 canvas画矩形时出现边框样式不一致的解决 ...
web和微信小程序input输入时禁止输入中文方法
前言:作为一个小白--,每天进步一点点,每天总结一点点,生活就会美好一点- -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式: 2. ...
ios手机端数字显示黑色和input输入时禁止滑动的解决方案
一.ios手机端数字显示黑色苹果手机会自动识别出电话号码,以提高用户的体验,但是看着就会和其他元素格格不入,如下图: 有两个解决方案: 1.在头部标签中加入 <meta name=" ...
html给input添加边框,html input怎么设置虚线边框样式
html input设置虚线边框的方法:在input标签中使用style属性,添加"border-style: dashed;"或者"border:宽度值 dashed ...
【Css】input输入文本框的样式大全和搜索框实例（图文和完整源码）
一.默认显示信息 <input type="text" required="required" placeholder=" 请输入金额" ...
input搜索mysql_实现input输入时智能搜索
//智能搜索 function oSearchSuggest(searchFuc) {var input = $('#in');var suggestWrap = $('#gov_search_sug ...
html 图片获得焦点框,html 去掉input 获取焦点时的边框
java字符乱码在java中处理字符时,经常会发生乱码,而主要出现的地方在读取文本文件时发生,或者是写入到文件中,在其他地方打开乱码. 如下例子: BufferedReader br = null; ...
去掉input聚焦时的边框
<html><body><input placeholder="请输入"/></body> </html> border ...

input输入时的边框样式去除

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

以下是常见的input框的type不同的值

input输入时的边框样式去除相关推荐

最新文章

热门文章