去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影

input, textarea, button, a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

时间： 2024-08-10 19:05:24

去掉移动端页面 input, textarea, button, a 标签获取焦点时显示的黑影的相关文章

js控制ios端的input/textarea元素失去焦点时隐藏键盘

同事在测试产品时发现这样一个:"某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去" 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测试给document添加一个click事件,发现了问题的原因: 安卓是可以触发click事件的,而iPhone不会触发. 也就是说在iOS设备下你点击空白的document处input并不能失去焦点. 解决办法: 既然click不能触发iPhone的事件,那就需要找触屏事件来触发一次: o

input标签获取焦点时文本框内提示信息清空背景颜色发生变化

<input type="text" id="username" onfocus="myFocus(this,'#f4eaf1')" onblur="myblur(this,'#ffffff')" value="请输入姓名"/> function myFocus(obj,color){ if(obj.value == "请输入姓名"){ obj.value

遭遇input与button按钮背景图失效不显示的解决办法

笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器Safari.Opera下不兼容的问题,其中IE6最为棘手,历来IE6就被诸位前端代码人员所诅咒,无奈其用户在中国大陆又非常多!可恶的微软啊,你当年造IE6的时候为何不严格遵守W3C标准呢? 今天做公司的交友网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪

转移动端-webkit-user-select:none导致input/textarea输入框无法输入

移动端webview中写页面的时候发现个别Android机型会导致input.textareat输入框无法输入(键盘可以弹起,不是webView.requestFocus(View.FOCUS_DOWN);的问题) 由于移动端我习惯统一初始化样式: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transpa

input[type='submit']input[type='button']button等按钮在低版本的IE下面，去掉黑色边框的问题

今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border:none; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <st

页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div，点击空白消失

\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"></div> <script language="javascript"> $(document).ready(function(e) { $("#test").click(function(e) { $("#tanchu"

:input 匹配所有 input, textarea, select 和 button 元素

描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input ty

移动端页面制作2

5:等分,居中等页面布局等分在说等分之前,先抛出一个问题,如下面的emmet代码,footer部分的导航有些页面是三个,有些页面是四个,我们要求的是不论是三个还是四个甚至于5个,都平分宽度. footer.footer>ul.nav-links>li*3 footer.footer>ul.nav-links>li*4 float 如果采用float技术的话,那估计只有在ul上添加额外的class来设置li的百分比宽度了. .nav-links li{ float:left; w

移动端页面制作

1:pc端响应式开发火狐浏览器打开菜单栏,点击开发者,选择我们的响应式设计 ctrl+shiift+M 谷歌浏览器点击“show console”图标,打开模拟面板,使用"User Agent",选择所要模拟的机子,点击emulate按钮模拟,刷新浏览器.如要调整横竖屏,切换到"screen" 2:新建页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&