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

   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. vs2017 C++动态链接库的创建和调用(隐式)

    一.VS创建动态链接库 1.打开vs新建项目 创建动态链接库 2.添加头文件.h,在h文件中添加如下内容: #pragma once//该头文件只编译一次#include<iostream> ...

  2. Mybatis中的多表查询 多对一,一对多

    示例:用户和账户 一个用户可以有多个账户 一个账户只能属于一个用户(多个账户也可以属于同一个用户) 步骤: 1.建立两张表:用户表,账户表 让用户表和账户表之间具备一对多的关系:需要使用外键在账户表中 ...

  3. Codeforces Round #549 (Div. 2)A. The Doors

    A. The Doors time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  4. luoguP3415 祭坛

    https://www.luogu.org/problemnew/show/P3415 考虑二分结界层数,将 n 个点按 x 大小依次加入答案,一行一行的做,用树状数组维护当前这一行中[0, x - ...

  5. php 百万级数据文件导出

    背景:最近一个需求是从mysql里面读取数据(有点大),然后导出为csv文件 问题 :发现导出的过程中自己中断了,没有报错 . 第一反应是测试导出一个小一点的数据(少查几条),发现没问题 . 查看导出 ...

  6. 使用Lazy对构造进行重构后比较

    用于测试在是否使用Lazy 的情况下,服务器负载,及服务提供情况对比.     服务器环境:   在此机器上安装了1 Hyper-V ,分配走1G内存,同时在本地上安装 SQLServer ,   在 ...

  7. 20165224 陆艺杰 Exp3 免杀原理与实践

    杀软是如何检测出恶意代码的? 识别代码特征码 监测像后门的行为 (2)免杀是做什么? 让后面程序不被安全软件发现 (3)免杀的基本方法有哪些? 多方式编码 半手工shellcode编程 完全自己写没有 ...

  8. celery实现异步任务

    celery==3.1.25 rabbitmq开启服务 tasks.py代码如下: from celery import Celery broker = 'amqp://guest:guest@loc ...

  9. ABP中文网入门篇教程中的一个bug

    入门--从空项目开始--使用ASP.NET Core Web Application https://cn.abp.io/documents/abp/latest/Autofac-Integratio ...

  10. Codeforces - 38G 可持久化Treap 区间操作

    题意:\(n\)个人排队,每个人有重要度\(p\)和不要脸度\(c\),如果第\(i\)个人的重要度大于第\(i-1\)个人的重要度,那么他们之间可以交换,不要脸度-1,交换后先前的第\(i\)个人也 ...