input 去掉点击后出现的边框

添加属性 :focus{outline:none} 就可以去掉默认点击时,边框会出现的蓝色边框。
:focus 选择器用于选取获得焦点的元素。
提示:接收键盘事件或其他用户输入的元素都允许 :focus 选择器。
不想点击时每次都要设置的话,最好在默认样式中就设置:
input,textarea,select,a:focus {
outline: none;
}
用 :focus 实现外部边框改变颜色:

input:focus {
outline:1px solid #7c448f;
}
用 :focus 实现内部边框改变颜色:

input:focus{
border-color:#7c448f ;
outline: none;
}
---------------------------------------------------------分割线-------------------------------------------------
- outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。(outline是围绕元素。它是围绕元素的边距。但是,它是来自不同的边框属性,outline不是元素尺寸的一部分,因此 元素的宽度和高度属性不包含轮廓的宽度 )
- outline简写属性在一个声明中设置所有的轮廓属性。
- 可以设置的属性分别是(按顺序):outline-color(规定边框的颜色), outline-style(规定边框的样式), outline-width(规定边框的宽度)。
- 如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

input 去掉点击后出现的边框的更多相关文章
- css总结4:input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...
- 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏
示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...
- css实现input文本框的双边框美化
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 【Winfrom-Button】 重写Button,去掉获取焦点时的边框
Winfrom Button 去掉获取焦点时的边框: 自定义一个Button,重写ShowFocusCues方法 /// <summary> /// 去掉获取焦点的边框 /// </ ...
- input点击后的 默认边框去除
转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...
- 去掉input获取focus时的边框
贴图,问题如下: 尽管已经设置输入框的border为none,当输入框focus时扔会出现浏览器自带的边框 解决方法,添加如下样式即可,.fs_input为输入框样式 ---------------- ...
- 去掉a标签点击后的虚边框
a { cursor: pointer; text-decoration: none; hide-focus: expression(this.hideFocus=true); outline: no ...
- HTML页面表单输入框去掉鼠标选中后边框变色的效果
标题说的有些含糊,实在不知道怎么描述了,就简单说一下吧,一个最简单的表单,代码如下,没有任何样式和名字, <!DOCTYPE html> <html> <head> ...
- (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
随机推荐
- 深入理解JNI
深入理解JNI 最近在学习android底层的一些东西,看了一些大神的博客,整体上有了一点把握,也产生了很多疑惑,于是再次把邓大神的深入系列翻出来仔细看看,下面主要是一些阅读笔记. JNI概述 JNI ...
- wince6.0 编译报错:"error C2220: warning treated as error - no 'object' file generated"的解决办法
内容提要:wince6.0编译报错:"error C2220: warning treated as error - no 'object' file generated" 原因是 ...
- 关于IOS中使用支付功能(以支付宝为例)
支付宝是第三方支付平台,简单来说就是协调客户,商户,银行三者关系的方便平台 使用支付宝进行一个完整的支付功能,大致有以下步骤: a 与支付宝进行签约,获得商户ID(partner)和账号ID(sell ...
- Mac OS X下让ruby支持tcl/tk
我记得在老早在OS X10.8下使用ruby1.9.x的时候只要到下载安装ActiveTcl8.5,没怎么配置就运行tk好好的.但是近日想重新执行下tk代码,发现在require 'tk'的时候就报错 ...
- IT轮子系列(三)——如何显示方法名——Swagger的使用(三)
前言 在上一篇文章IT轮子系列(三)——如何给返回类型添加注释——Swagger的使用(二) 介绍如何使用swashbuckle的时候忽略了一个问题,就是默认创建的API项目在生成文档的时候是没有显示 ...
- Java中常用的数据结构类
结构体系图 List ArrayList.LinkedList.Vector有什么区别? ArrayList 只能装入引用对象(基本类型要转换为封装类): 线程不安全: 底层由数组实现(顺序表),因为 ...
- Kali Linux 工具使用中文说明书
From: https://www.hackfun.org/kali-tools/kali-tools-zh.html 英文版地址:http://tools.kali.org/ 信息收集 accche ...
- 163邮箱 SMTP发送邮件注意点
在之前163邮箱注册的时候默认开通SMTP服务的,之后需要自己手动开始. 在配置的时候服务器的地址固定 用户名称就是你的邮箱 密码需要注意的是有的是你邮箱的密码,如果不对需要填写你的授权码!
- Linux的动态库与静态库
1.动态库与静态库简介 在实际的软件开发中,为了方便使用一些被重复调用的公共代码,我们经常将这些公共的函数编译成动态库或静态库.我们知道程序一般要经过预处理.编译.汇编和链接这几个步骤才能变成可执行的 ...
- SEO优化-robots.txt解读
一.什么是robots.txt robots.txt 文件由一条或多条规则组成.每条规则可禁止(或允许)特定抓取工具抓取相应网站中的指定文件路径. 通俗一点的说法就是:告诉爬虫,我这个网站,你哪些能看 ...