添加属性 :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 去掉点击后出现的边框的更多相关文章

  1. css总结4:input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

  2. 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏

    示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...

  3. css实现input文本框的双边框美化

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. 【Winfrom-Button】 重写Button,去掉获取焦点时的边框

    Winfrom Button 去掉获取焦点时的边框: 自定义一个Button,重写ShowFocusCues方法 /// <summary> /// 去掉获取焦点的边框 /// </ ...

  5. input点击后的 默认边框去除

    转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...

  6. 去掉input获取focus时的边框

    贴图,问题如下: 尽管已经设置输入框的border为none,当输入框focus时扔会出现浏览器自带的边框 解决方法,添加如下样式即可,.fs_input为输入框样式 ---------------- ...

  7. 去掉a标签点击后的虚边框

    a { cursor: pointer; text-decoration: none; hide-focus: expression(this.hideFocus=true); outline: no ...

  8. HTML页面表单输入框去掉鼠标选中后边框变色的效果

    标题说的有些含糊,实在不知道怎么描述了,就简单说一下吧,一个最简单的表单,代码如下,没有任何样式和名字, <!DOCTYPE html> <html> <head> ...

  9. (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

随机推荐

  1. Unity Web自适应浏览器

    unity web的自适应浏览器比我想象中要更简单,但是这里也只有更改最简单的东西实现了自适应.发布web时,在playersetting里面设置分辨率为你在Game窗口自定义的分辨率大小,以保证内容 ...

  2. objective-c中所谓的僵尸对象

    正常情况下向已回收的对象发送消息时灵时不灵,具体要看该对象所占内存有没有被覆写.cocoa提供了僵尸对象(Zombie Object)这个功能,简单的说:启用该调试功能后,运行时会将所有已回收的实例转 ...

  3. Linux Framebuffer驱动剖析之一—软件需求

    嵌入式企鹅圈将以本文作为2015年的终结篇,以回应第一篇<Linux字符设备驱动剖析>.嵌入式企鹅圈一直专注于嵌入式Linux和物联网IOT两方面的原创技术分享,稍后会发布嵌入式企鹅圈的2 ...

  4. SharePoint 2013配置启用搜索服务

    1.安装完毕SharePoint 2013,新建网站集,点击搜索,出现如下错误(因为没配置,别激动). 2.尝试启动服务器场中的服务之SharePoint Server Search,提示新建搜索应用 ...

  5. 从开发者角度解析 Android N 新特性!

    大清早看到 Google 官方博客发布 Android N 的开发者预览版,立马从床上跳起来开始仔仔细细的读起来. 从开发者角度来看,Android N 的更新并不算大.网上之前流传的一些 Andro ...

  6. 单片机PWM调制技术

    我们可以看看下图,下图就是一个典型的PWM的波形图. T是一个周期,T1就是高电平所占用的时间,T2就是低电平所占用的时间. 如上图所示T1为脉冲宽度(就是导通时间),周期为T,则输出电压的平均值为U ...

  7. RHEL 6 mdadm 实现Soft Raid

    环境:RHEL 6.9 x64 1.mdadm命令用于管理系统软件RAID硬盘阵列 格式为:"mdadm [模式] <RAID设备名称> [选项] [成员设备名称]". ...

  8. ELF 动态链接 so的动态符号表(.dynsym)

    静态链接中有一个专门的段叫符号表 -- ".symtab"(Symbol Table), 里面保存了所有关于该目标文件的符号的定义和引用. 动态链接中同样有一个段叫 动态符号表 - ...

  9. 遍历输出图片加hover

    1. $(".icon a>div").hover(function () { var slls = $(this).attr("class"); sll ...

  10. merge intervals(合并间隔)

    Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,1 ...