移动端点击控件有阴影

2020-03-31  本文已影响0人  光明程辉
import FastClick from 'fastclick'


// 解决 点击事件延迟、慢的问题
FastClick.attach(document.body);
FastClick.prototype.focus = function (targetElement) {
    'use strict';
    targetElement.focus();
};

此外,最好添加个全局样式: rest.less

body,
html {
    width: 100%;
    height: 100%;
}

Section,
abbr,
article,
aside,
blockquote,
body,
canvas,
dd,
div,
dl,
dt,
embed,
fieldset,
figure,
form,
gloabl,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
input,
input,
li,
nav,
nav,
ol,
p,
pre,
section,
td,
th,
ul,
xml {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    padding: 0;
    margin: 0;
}

a:active {
    opacity: 0.8;
}

li,
ol,
ul {
    list-style: none;
}

body {
    margin: 0;
    color: #000;
    box-sizing: border-box;
}

div {
    box-sizing: border-box;
}

button {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

label {
    display: block;
    height: 100%;
}

button:active {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .1);
    opacity: 0.9;
}

input:focus {
    outline: none;
}

button:focus {
    outline: none;
}

/* IOS,input出现阴影 */

input,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="text"],
textarea {
    -webkit-appearance: none !important;
    /* 清楚ios阴影 */
    -moz-appearance: none !important;
    /* mobile firefox too! */
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

/* input为number时,在机子上显示上下箭头,去掉 */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}
上一篇 下一篇

猜你喜欢

热点阅读