如何去除表单元素获得焦点时的外边框: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#中使用科大讯飞Web API进行语音合成
最近工作中需要用到讯飞语音合成接口,网上看了下基本都是Java,PHP,Python版本的,正好补上C# 版本,代码比较简单. 首先在讯飞开放平台上创建一个WebApi项目,取到APPID与APIK ...
- WeStrom自定义设置修改快捷键
按照下图操作,不BB: 终极懒人设置:!!!
- LoadRunner监控Linux条件和解决方法
注:内容来自网络 需要下载3个包: (1)rsh-0.17-14.i386.rpm (2)rsh-server-0.17-14.i386.rpm (3)rpc.rstatd-4.0.1.tar.gz ...
- 使用 GPU 加速计算
U-n-i-t-y 提供了 [Compute Shader][link1] 来使得我们可以将大量的复杂重复的计算交给并行的 GPU 来处理,正是由于并行原因,这样就可以大大加快计算的速度,相比在 CP ...
- Selenium API(一)
1.设置浏览器大小: # -*- coding:utf- -*- from selenium import webdriver import time driver = webdriver.Firef ...
- 第0篇 Python前言
1.注释 1)注释的作用: 用自己熟悉的语言在代码中添加注释,方便后期自己查看和理解,也方便其他人查看和理解代码含义. 2)单行注释: 以#号开头,#后面的所有内容均不会被程序执行,起到辅助说明的作用 ...
- [Swift实际操作]九、完整实例-(4)在项目中使用CocoaPod管理类库和插件
本文将为你演示,如何使用CocoaPod第三方类库管理工具,在项目中安装未来需要使用的类库.首先创建一份文本文件.可以使用一个脚本创建文件,你可以采用自己的方式是创建一份文本文件,接着在文件名称上点击 ...
- SpringMVC中视图解析器
视图解析器:固定写法直接coppy就行 1.dispatcherServlet-servlet.xml中添加 <!-- 视图解析器InternalResourceViewResolver --& ...
- CentOS71611安装Python3.5.3
yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel gcc wget wg ...
- 浅谈PHP的Public、Protected、Private三种方法的区别
public:权限是最大的,可以内部调用,实例调用等.protected: 受保护类型,用于本类和继承类调用.private: 私有类型,只有在本类中使用. <?php error_report ...