关于在手机端onclick事件和a标签点击出现背景input输入框有阴影

最新推荐文章于 2024-03-16 17:50:45 发布

sunshine08_07

最新推荐文章于 2024-03-16 17:50:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：手机端样式

本文链接：https://blog.youkuaiyun.com/sunshine08_07/article/details/80927229

手机端样式专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决移动端Web页面中a标签点击高亮、onclick事件黑色背景及input标签圆角和阴影等问题的方法。通过CSS属性-webkit-tap-highlight-color设置为transparent来消除点击高亮效果，并使用-moz-appearance:textfield移除input文本框的默认样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、a标签在移动端点击出现浅蓝色背景

a,a:hover,a:active,a:visited,a:link,a:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
}

2、onclick事件在移动端点击出现黑色背景，需在点击的元素样式里面加下面代码

-webkit-tap-highlight-color:transparent

3、input标签在移动端出现圆角以及黑色阴影

input[type=text] { -moz-appearance:textfield;}
input[type=text]::-webkit-inner-spin-button,input[type=text]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}