如何去除表单元素获得焦点时的外边框: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 ...
随机推荐
- C#ADO.NET基础一
简介 使用SQLite进行讲解 1.基础类: SQLiteConnection 连接数据库 SQLiteCommand 执行命令(增,删,改,查),或存储过程 SQLiteDataReader 读取查 ...
- 精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解!(转载)
Anagrams of string(带有重复项) 使用递归.对于给定字符串中的每个字母,为字母创建字谜.使用map()将字母与每部分字谜组合,然后使用reduce()将所有字谜组合到一个数组中,最基 ...
- Windows中与系统关联自己开发的程序(默认打开方式、图标、右击菜单等)
1. 默认打开方式 1.1. 代码支持 在Windows下,某个特定后缀名类型的文件,如果要双击时默认用某个程序(比如自己开发的WinForm程序)打开,代码中首先肯定要支持直接根据这个文件进行下一步 ...
- .net core .NET Core与.NET Framework、Mono之间的关系
.NET Core与.NET Framework.Mono之间的关系 首先想要知道.NET Core与.NET Framework.Mono之间的关系,就必须他们分别是什么,有什么用途? 一. .ne ...
- 内存布局------c++程序设计基础、编程抽象与算法策略
图中给出了在一个典型c++程序中如何组织内存的框架.程序中的指令(在底层都是按位存储的).全局变量.静态对象和只读常量往往被存储在静态去(static area)(第二个图中的数据段.代码段.值得注意 ...
- 用Python写一个随机密码生成器
# /bin/python3 import sys import time import random strs = [ i for i in range(32,128) ] #产生密码的ASCII码 ...
- dota有哪些经典的典故或笑话?
----------------------------------------------------dota有哪些经典的典故或笑话?虽然现在玩游戏也没什么热情了, 但是看到这些还是笑尿,笑点低 = ...
- 【ARC075F】Mirrored 搜索/数位dp
Description 给定正整数DD,求有多少个正整数NN,满足rev(N)=N+Drev(N)=N+D,其中rev(N)rev(N)表示将NN的十进制表示翻转来读得到的数 Input 一个 ...
- 洛谷P3236 [HNOI2014]画框(最小乘积KM)
题面 传送门 题解 我似乎连\(KM\)都不会打啊→_→ 和bzoj2395是一样的,只不过把最小生成树换成\(KM\)了.因为\(KM\)跑的是最大权值所以取个反就行了 //minamoto #in ...
- 最近关于linux的一些小问题。
redhat 用yum更新时需要注册付费.centos 不用. 原来版本的ifconfig 在centos中变为了ip addr.