input获得焦点时,如何让外边框不变蓝
border 可应用于几乎所有有形的html元素,而outline 是针对链接、表单控件和ImageMap等元素设计。
outline的效果将随元素的 focus 而自动出现,相应的随 blur 而自动消失。这些都是浏览器的默认行为,无需JavaScript配合CSS来控制。outline 不会像border那样影响元素的尺寸或者位置。
使用input:focus{outline:none;},可以达到“输入框”获得焦点时边框不变蓝的效果。这个效果也可以使用在button上,button:focus{outline:none;}。
但是在Firefox下,对于类型为button的元素,即使设置outline,也还是会出现虚线。可以使用一个Firefox的私有伪元素:
button:-moz-focus-inner{border:0;},
特别注意的是-moz-focus-inner设置的不是outline,而是设置border。
input获得焦点时,如何让外边框不变蓝的更多相关文章
- 去掉chrome浏览器中input获得焦点时的带颜色边框呢
可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}
- 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- :input获得焦点时被弹出键盘挡住解决办法
这个是移动端非常常见的bug了,这里说下综合的解决办法,因为有时候你的办法就是会失效.. 上代码 /*input框调起输入法盖住输入问题*/$('input[type="text" ...
- 【小程序】---- input获得焦点时placeholder重影BUG
问题小程序的input组件有个自身的bug,即当输入框获取焦点时placeholder内容会出现重影现象. 解决思路原理:将placeholder内容单独写在另外的标签里,控制其显示隐藏.操作:将代表 ...
- input获得焦点时改变placeholder文本的样式
HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...
- webapp之登录页面当input获得焦点时,顶部版权文本被顶上去 的解决方法
如上图,顶部版权是用绝对定位写的,被顶上去了,解决方法是判断屏幕大小,改变footer的定位方式: <script> var oHeight = $(document).height(); ...
- (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- 去掉chrome、safari input或textarea在得到焦点时出现黄色边框的方法
1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...
- 如何去除表单元素获得焦点时的外边框:outline (轮廓)
我们在做制作表单页面时,经常会需要消除表单元素带来的边框,这时候我们需要用到两个属性: 1.表单元素未激活状态下的边框,不实现边框: border:none; 2.表单元素获得焦点时的轮廓,隐藏轮廓: ...
随机推荐
- gerrit配置跳过审核直接push到gitlab
项目中有存放项目相关的文档,这些项目需要配置跳过审核再提交的操作.现在需要给某些组配置不审核直接提交的权限 方法: 使用管理员账号,到 projects -> access 页面下配置 refe ...
- Clion下同时编写多个main函数
在你的CMakeLists.txt文件下配置,使用add_executable(),前面的一定要不一样 红色部分是描述main的,配置后运行处可以选择:
- 帝国cms更换Ueditor编辑器上传图片加水印
Ueditor安装包,里面有个/php/文件夹,找到Uploader.class.php,这是通用上传类文件找到private function upFile(),这是上传文件的主处理方法,找到122 ...
- [Beta]第五次 Scrum Meeting
[Beta]第五次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/13 22:00 30min 大运村公寓6F楼道 附Github仓库:WEDO 例会照片 (一人上 ...
- 剑指offer:二叉搜索树与双向链表
题目描述: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 思路分析: 这道题一开始的思路是借用队列结构,首先中序遍历二叉树,按顺序 ...
- DOM 是什么,Document Object Model,文档对像模型
#为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...
- Python之schedule用法,类似linux下的crontab
# -*- coding: utf-8 -*- # author:baoshan import schedule import time def job(): print("I'm work ...
- Jmeter之测试计划
一.打开jmeter时会有一个测试计划默认显示,界面如下: 二.测试计划各个配置项说明 1.名称:即整个测试计划的名称,已实际项目命名为好: 2.注释:即添加一些备注信息,以便后期回顾时查看: 3.用 ...
- C# Newtonsoft.Json解析json字符串处理 - JToken 用法
//*调用服务器API(获取可以处理的文件) //1.使用JSON通信协议(调用[待化验任务API]) String retData = null; { JToken json = JToken.Pa ...
- SpringCloud基础知识
什么是SpringCloud Spring Cloud是一系列框架的有序集合. 为什么用SpringCloud Spring Cloud涵盖面广,能够与Spring Framework.Spring ...