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

   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. 「POJ 2182」 Lost Cows

    题目链接 戳这 题目大意 \(N(2 <= N <= 8,000)\)头奶牛有\(1..N\)范围内的独特品牌.对于每头排队的牛,知道排在那头牛之前的并比那头牛的品牌小的奶牛数目.根据这些 ...

  2. Response Assertion(响应断言)

    响应断言可以让你添加匹配字符串来匹配请求和响应的各个字符串. 匹配字符串可以是1.Contains和Matches正则表达式:2.Equals和SubString文本类型,大小写敏感. Apply t ...

  3. map/fileter

    一.生成器,generator,节省内存,但是增加了CPU的计算时间 (下节课讲函数怎么变成生成器) 每次循环的时候,就按照这个规则(自己定义的逻辑)去生成一个数据. res = [ 'a','1' ...

  4. 【转】VS2010中无System.Data.OracleClient引用的问题

    源地址:http://blog.csdn.net/pinchw/article/details/30465749

  5. CBV请求流程源码分析

    一.CBV流程解析 urls.py urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^book/', views.BookView.as ...

  6. requests库和urllib包对比

    python中有多种库可以用来处理http请求,比如python的原生库:urllib包.requests类库.urllib和urllib2是相互独立的模块,python3.0以上把urllib和ur ...

  7. 【BZOJ1047】[HAOI2007]理想的正方形 (倍增ST表)

    [HAOI2007]理想的正方形 题目描述 有一个\(a*b\)的整数组成的矩阵,现请你从中找出一个\(n*n\)的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: ...

  8. [USACO10MAR]伟大的奶牛聚集 BZOJ 1827 树形dp+dfs

    题目描述 Bessie is planning the annual Great Cow Gathering for cows all across the country and, of cours ...

  9. vue is detected

    Vue.js is detected on this page. Devtools inspection is not available because it's in production mod ...

  10. tornado 07 数据库—ORM—SQLAlchemy—查询

    tornado 07 数据库—ORM—SQLAlchemy—查询 引言 #上节课使用query从数据库查询到了结果,但是query返回的对象是直接可用的吗 #在query.py内输入一下内容 from ...