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

   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. RabbitMQ 在 C# 中简单应用

    RabbitMQ是什么及如何安装就不再赘述,百度一下就知道了,只是在配置方面要多加注意. 话不多说,先直接上一个简示例代码 发送端: ConnectionFactory factory = new C ...

  2. 汇编Shellcode的技巧

    汇编Shellcode的技巧 来源  https://www.4hou.com/technology/3893.html 本文参考来源于pentest 我们在上一篇提到要要自定义shellcode,不 ...

  3. 从程序员的角度深入理解MySQL

      前言 今天我将站在程序员的角度以MySQL为例探索数据库的奥秘! 数据库基本原理 我对DB的理解 1.数据库的组成:存储 + 实例 不必多说,数据当然需要存储:存储了还不够,显然需要提供程序对存储 ...

  4. Spring Boot多数据源

    我们在开发过程中可能需要用到多个数据源,我们有一个项目(MySQL)就是和别的项目(SQL Server)混合使用了.其中SQL Server是别的公司开发的,有些基本数据需要从他们平台进行调取,那么 ...

  5. kali linux之手动漏洞挖掘一

    默认安装漏洞 phpmyadmin/setup默认安装 ubuntu/debian默认安装php5-cgi phpmyadmin/setup默认安装 使用?-d+allow_url_include%3 ...

  6. go语言排序

    冒泡: package main import ( "fmt" ) func BubbleSort(arr []int) []int { // 改进的冒泡排序 num := len ...

  7. 浅谈HTTP和TCP的理解

    TCP协议对应于传输层,而Http协议对应于应用层,Http协议是建立在TCP协议之上的,当浏览器需要从服务器获取网页数据的时候,会发出一次Http请求.HTTP会通过TCP建立一个连接通道,当HTT ...

  8. 【数据结构】单链表&&静态链表详解和代码实例

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 单链表(Singly Linked List ) 1.1 什么是单链表? 单链表是一种链式存储的结构.它动态的为节点分配存 ...

  9. CodeForces - 233A Perfect Permutation

    A. Perfect Permutation time limit per test: 2 seconds memory limit per test: 256 megabytes input: st ...

  10. JavaWeb学习笔记(八)—— EL表达式

    一.EL表达式概述 在JSP开发中,为了获取Servlet域对象中存储的数据,经常需要书写很多Java代码,这样的做法会使JSP页面混乱,难以维护.为此,在JSP2.0规范中提供了EL表达式.EL全名 ...