Javascript 在移动设备上点击按钮时，如何去除这些黑暗区域

源代码如下：

演示：

按钮本身是一个跨度元素。下面是相关的代码片段

import React, { Component } from "react";
import posed from "react-pose";
import "./Choice.css";

const config = {
  visible: {
    opacity: 1,
    y: 0,
    delay: 100
  },
  hidden: {
    opacity: 0,
    y: 8,
    delay: 200,
    transition: {
      duration: 200
    }
  }
};
const Underline = posed.div(config);

class Choice extends Component {
  constructor() {
    super();
    this.state = {
      isVisible: false
    };
  }

  componentDidMount() {
    this.setState({ isVisible: this.props.visibility });
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState({ isVisible: this.props.visibility });
    }
  }

  render() {
    return (
      <span
        className="word"
        onMouseEnter={() => this.props.onMouseEnter()}
        onMouseLeave={() => this.props.onMouseLeave()}
        onClick={() => this.props.onClick()}
      >
        {this.props.name}
        <Underline
          className="underline"
          pose={this.state.isVisible ? "visible" : "hidden"}
        />
      </span>
    );
  }
}

问题在于移动设备，当在移动设备上查看页面时，单击“打开”按钮时，每个按钮周围都会出现一个黑色区域。我附上了一张图片来演示

我想去掉这些暗区，这样当你点击这些按钮时，除了显示下划线外，什么都不会发生。试试这个CSS：

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;    
}

---

你的演示在我的iPhone上运行良好。按预期，点击时没有文本选择。