如何去除表单元素获得焦点时的外边框:outline (轮廓)
我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性:
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 (轮廓)的更多相关文章
- 关于谷歌浏览器 表单元素获取焦点后自动增加外边线的问题解决CSS代码
input,textarea:focus { outline: none;} /*去除表单元素默认边框*/
- ExtJS4.2下将表单元素放在菜单时不能进行拷贝的问题解决办法
通过浏览器F12我们发现,在菜单对应的dom元素上面,有几个系统附加的事件处理函数,只要我们将它去掉就可以了.示意代码如下: { xtype: "button", scope: z ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- jquery attr处理checkbox / select 等表单元素时的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...
- jquery attr处理checkbox / select 等表单元素时只能使用一次的坑
先上html结构 <body> <form action=""> <input type="checkbox" id=" ...
- IOS-<input>表单元素只能读,设置readonly时光标仍然可见的解决办
在HTML中,如果把一个<input>的readonly属性设置为"readonly",表示这个表单元素不能编辑. 但是,鼠标点击之后,这个表单元素还是有光标存在的. ...
- VUE 表单元素双向绑定总结
checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <in ...
随机推荐
- GraphQL 优势之处
一次查询,搞定需求 举个例子,Book对象有bookTypeId,那我想看对应的bookTypeName,bookType对应的summary咋办? 如果你用RESTful Api ,免不了要定制接口 ...
- 关于CS0016: Could not write to output file ‘c:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\Temporary AS
1.添加用户"Network Service” 和 “IIS_IUSERS” 读下面目录的读写权限 a) C:\Windows\Temp b) C:\Windows\Microsoft.NE ...
- android studio中使用recyclerview小白篇(二)
前面一个说了怎么把这个包引用进来,这一节说怎么做一个简单的例子出来,我也是照着别人的例子写的,然后慢慢改就行了,做好的效果如下图 1.在我们的activity_main中把recyclerview填加 ...
- Android 学习笔记 文本文件的读写操作
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- HBase基准性能测试报告
作者:范欣欣 本次测试主要评估线上HBase的整体性能,量化当前HBase的性能指标,对各种场景下HBase性能表现进行评估,为业务应用提供参考.本篇文章主要介绍此次测试的基本条件,HBase在各种测 ...
- Ubuntu 14.04.3 LTS如何安装谷歌输入法
谷歌输入法项目主页:https://code.google.com/p/scim-googlepinyin/ 一,打开Ubuntu 的“Ubunru的软件中心”,在搜索里面输入“googlepinyi ...
- 串的模式之kmp算法实践题
给定两个由英文字母组成的字符串 String 和 Pattern,要求找到 Pattern 在 String 中第一次出现的位置,并将此位置后的 String 的子串输出.如果找不到,则输出“Not ...
- ubuntu 16.4安装toolsbelt heroku
https://devcenter.heroku.com/articles/getting-started-with-python#set-up # Run this from your termin ...
- 1、TensorFlow简介
参考:http://www.tensorfly.cn/tfdoc/get_started/basic_usage.html 1.用TensorFlow构造一个简单的线性拟合: # -*- coding ...
- python shell 清屏(window)
IDLE增加一个清屏的扩展ClearWindow就可以了(在Issue 6143: IDLE中可以看到这个扩展的说明) 安装使用的方法 1.下载ClearWindow.py(右击-目标另存为,格式为p ...