我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性:

   1、表单元素未激活状态下的边框,不实现边框: border:none;

2、表单元素获得焦点时的轮廓,隐藏轮廓: outline:medium;

  具体代码如下:

            .form_row input[type=text],
.form_row input[type=password] {
width: 520px;
height: 40px;
margin: 0px auto;
margin-left: 5px;
display: block;
border: none;
color: #999999;
font-size: 14px;
border-radius: 5px;
background-color: #eff0f4;
text-indent: 45px;
}
.form_row input:focus {
background-color: white;
box-shadow: 0 0 15px #ece9e9;
border: none;
outline: medium;
}
效果如下:
  

  

PS:

 这里有一点需要注意的是,经量不要使用border:0;和outline:0;
对比0与none;之间的区别在于有渲染和没渲染,感觉他们和display:none;与visibility:hidden;的关系类似

如何去除表单元素获得焦点时的外边框:outline (轮廓)的更多相关文章

  1. 关于谷歌浏览器 表单元素获取焦点后自动增加外边线的问题解决CSS代码

    input,textarea:focus { outline: none;} /*去除表单元素默认边框*/

  2. ExtJS4.2下将表单元素放在菜单时不能进行拷贝的问题解决办法

    通过浏览器F12我们发现,在菜单对应的dom元素上面,有几个系统附加的事件处理函数,只要我们将它去掉就可以了.示意代码如下: { xtype: "button", scope: z ...

  3. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  4. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. jquery attr处理checkbox / select 等表单元素时的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  6. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...

  7. jquery attr处理checkbox / select 等表单元素时只能使用一次的坑

    先上html结构 <body> <form action=""> <input type="checkbox" id=" ...

  8. IOS-<input>表单元素只能读,设置readonly时光标仍然可见的解决办

    在HTML中,如果把一个<input>的readonly属性设置为"readonly",表示这个表单元素不能编辑. 但是,鼠标点击之后,这个表单元素还是有光标存在的. ...

  9. VUE 表单元素双向绑定总结

    checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...

随机推荐

  1. c# 将json转换为DataTable

    /// <summary> /// 将json转换为DataTable /// </summary> /// <param name="strJson" ...

  2. 十一、Node.js监听代码改动自动重启node插件supervisor

    我们慢慢地发现,每次我们稍微改变js代码都需要重启服务才能在浏览器显示新的效果,很麻烦,这里我们可以通过npm命令安装supervisoror插件,安装方法如下 之前章节我们知道安装了nodejs就会 ...

  3. StringUtils常用方法介绍

    要使用StringUtils类,首先需要导入:import org.apache.commons.lang.StringUtils;这个包 在maven项目中需要添加下面这个依赖: <depen ...

  4. Linux下抓包命令tcpdump

    本文内容来源于网络 PS:tcpdump是一个用于截取网络分组,并输出分组内容的工具,简单说就是数据包抓包工具.tcpdump凭借强大的功能和灵活的截取策略,使其成为Linux系统下用于网络分析和问题 ...

  5. Oracle大字段(clob)模糊查询优化方法

    对于内容很多的时候clob打字段模糊查询很慢,整理一个小方法: 1,在查询的列上建索引 2,对于要查询的clob字段使用一下语句创建索引   CREATE INDEX idx_zs_info_note ...

  6. 201621123012 《java程序设计》第2周学习总结

    1. 本章学习总结 1.学习了java许多了基本语法,string函数,arraylist函数的各种功能方法和调用. 2.了解了除for循环之外的foreach循环 3.学习了各种数值类的包装 4.熟 ...

  7. shell和python之间的参数传递

        我们在使用shell调用其他语言的程序的时候,希望能够便捷的从shell中输入参数,然后由目标程序接收参数并运行,这样就省去了每次需要在原程序进行修改带来的麻烦,这里介绍一下如何从shell中 ...

  8. HTML中title前面小图标的实现

    做一个比较正规的网站,需要在标题栏前面加上相应的小图标,会好看的多.效果大致如下: 其实实现起来很简单,只要在html文件中的<head></head>标签中加上: <l ...

  9. Nginx+certbot 实现泛域名的https证书

    yum -y install git git clone  https://github.com/certbot/certbot cd certbot ./certbot-auto certonly ...

  10. Idea 软件Project项目的jar依赖关系设置方法

    1.查看所依赖的jar文件 (1)File--->Project Structure (2)Modules--->project01---->dependencies,可见所缺少的j ...