添加属性 :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. Android实训案例(二)——Android下的CMD命令之关机重启以及重启recovery

    Android实训案例(二)--Android下的CMD命令之关机重启以及重启recovery Android刚兴起的时候,着实让一些小众软件火了一把,切水果,Tom猫,吹裙子就是其中的代表,当然还有 ...

  2. region server 中的OOM原因

    首先要清楚reginserver中内存是如何使用的.     reginserver中内存总体分成三部分:blocksize专供读使用的内存,memstore供读写使用的内存,其它内存.     其中 ...

  3. PHP基本的语法结构

    学过C语言的话,上手PHP语言就非常快了,如果你有bash shell的基础,那恭喜你,上手PHP会更快,我们先来了解一下一些比较简单的东西,界定符和注释在PHP中的写法: 一 php文档的语法结构 ...

  4. Github搜索技巧-如何使用github找到自己感兴趣的项目

    Github现在不仅仅作为一个版本控制工具,更是一个开源的仓库,里面不但有优秀的开源代码,电子书,还有一些五花八门的项目,有些国家的法律也放在上面,作为程序员如何找到自己感兴趣的项目就非常重要了! 欢 ...

  5. Java Web开发中路径问题小结

     Java Web开发中,路径问题是个挺麻烦的问题,本文小结了几个常见的路径问题,希望能对各位读者有所帮助. (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 ...

  6. Oracle面试过程中常见的二十个问题

    1.冷备份和热备份的不同点以及各自的优点  解答:热备份针对归档模式的数据库,在数据库仍旧处于工作状态时进行备份.而冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库.热备份的优点在于当备份时, ...

  7. .net开发微信(1)——微信订阅号的配置

    到微信公众平台按提示一直走下去后,可能遇到的难点就是填写Url和Token了. 开发文档里说,url是自己的服务器地址,Token随便写.但是一直提示Token验证失败. 解决办法:需要在服务器里新增 ...

  8. jsoup 使用总结3--高级用法之 not

    jsoup 使用总结3--高级用法之 not 大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询:具体使用方法可以参考jsoup官网文档 例子代码: ...

  9. GlitchBot -HZNU寒假集训

    One of our delivery robots is malfunctioning! The job of the robot is simple; it should follow a lis ...

  10. 下载Github上某个项目的子文件夹和单个文件

    preface Github下的项目可能很大,里面有很多的子文件夹,我们可能只需要使用某个子目录下的资源,可以不用下载完整的repo就能使用. 例如,我想下载这个repo中的字典文件:https:// ...