如何去除表单元素获得焦点时的外边框: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 ...
随机推荐
- WP REST API: 设置和使用OAuth 1.0a Authentication(原文)
In the previous part of the series, we set up basic HTTP authentication on the server by installing ...
- 正确处理类的复合关系------新标准c++程序设计
假设要编写一个小区养狗管理程序,该程序需要一个“主人”类,还需要一个“狗”类.狗是有主人的,主人也有狗.假定狗只有一个主人,但一个主人可以有最多10条狗.该如何处理“主人”类和“狗”类的关系呢?下面是 ...
- C语言编程基础
主流C语言编译器介绍 关于GNU规范的语法扩展 用C语言构建一个可执行程序的流程 宏定义(无参宏定义和带参宏定义),C语言宏定义详解 条件编译,C语言条件编译详解 原码.反码.补码及位操作符,C语言位 ...
- 【ARC062F】 Painting Graphs with AtCoDeer 点双连通分量+polya定理
Description 给定一张N点M边的无向图,每条边要染一个编号在1到K的颜色. 你可以对一张染色了的图进行若干次操作,每次操作形如,在图中选择一个简单环(即不经过相同点的环),并且将其颜色逆时针 ...
- 再谈VS2010编译更高平台vs2012(v110),vs2015(v140)的objectARX程序
前段时间我贴了一篇vs2010批量编译vc6~vs2008的ARX版本,实际上那一篇是我在研究vs2010编译v110,v140平台的附带收获,正应了那句话,有心栽花花不开,无心插柳柳成荫,因为vs2 ...
- 解决 Github用户名 变为 invalid-email-address 问题
解决 Github用户名 变为 invalid-email-address 问题 If the identity used for this commit is wrong, you can fix ...
- BUAA_OO_电梯系列
电梯作业 第一次作业和第二次作业 由于我第一次作业给傻瓜电梯写了捎带所以第一次第二次作业差不多 电梯运行一个线程Elevator,输入控制一个线程Call 一个物理电梯控制表可以完成移动和进出人功能, ...
- Navicat Premium 12.1.12.0破解版激活
声明:本文所提供的所有软件均来自于互联网,个人存放在此作为备用,以备将来不时之需,同时作为大家的分享和学习成果,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 附:二 ...
- mysql自动备份并上传至git仓库
自动备份 备份需求 数据库备份的重要性再怎么强调也不为过.当你的操作出现差错,但又因为没有作备份导致数据无法还原时,你就能体会到“万念俱灰”的心情了. 数据库备份有多种形式,本文以我的个人网站数据 ...
- 使用带参数的SQL语句向数据库中插入空值
private void button1_Click(object sender, EventArgs e) { string name = textBox1.Text; int age = Conv ...