如何去除android上a标签产生的边框
16lz
2021-01-26
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
webkit表单输入框placeholder的颜色值能改变么
input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}
webkit表单输入框placeholder的文字能换行么
ios可以,android不行~
在textarea标签下都可以换行~
IE10(winphone8)表单元素默认外观如何重置
禁用select默认下拉箭头
::-ms-expand适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏(display:none)并使用背景图片来修饰可得到我们想要的效果。
select::-ms-expand {display: none;}
禁用radio和checkbox默认样式
::-ms-check适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏(display:none)并使用背景图片来修饰可得到我们想要的效果。
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮,::-ms-clear适用于该清除按钮的修改,同样设置使它隐藏(display:none)并使用背景图片来修饰可得到我们想要的效果。
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display: none;}
禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}
禁止ios和android用户选中文字
.css{-webkit-user-select:none}
参考《如何改变表单元素的外观(for Webkit and IE10)》
打电话发短信的怎么实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信,winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
模拟按钮hover效果
移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下,
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><style type="text/css">a{-webkit-tap-highlight-color: rgba(0,0,0,0);}.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}.btn-blue:active{background-color: #357AE8;}</style></head><body><div class="btn-blue">按钮</div><script type="text/javascript">document.addEventListener("touchstart", function(){}, true)</script></body></html>
兼容性ios5+、部分android 4+、winphone 8
要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名
<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><style type="text/css">a{-webkit-tap-highlight-color: rgba(0,0,0,0);}.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}.btn-blue-on{background-color: #357AE8;}</style></head><body><div class="btn-blue">按钮</div><script type="text/javascript">var btnBlue = document.querySelector(".btn-blue");btnBlue.ontouchstart = function(){ this.className = "btn-blue btn-blue-on"}btnBlue.ontouchend = function(){ this.className = "btn-blue"}</script></body></html>
更多相关文章
- android实现打电话和发短信的功能(10学员张晓丛)
- Android(安卓)中传递 json 的问题
- Android之CheckBox(多选按钮)
- Android(安卓)自定义选项卡按钮和选项卡位置
- Android(安卓)view的移动和画布的移动原理 适用于制作各种效果
- Android开发8:UI组件TextView,EditText,Button
- Android(安卓)使用Post与Get方法进行表单提交数据
- Android(安卓)4.0中状态栏上各个按钮的点击实现
- android webview设置缩放按钮时候无法显示问题