防止 HTML 文本扭曲可点击覆盖

Question

为了让我的网站允许上传文件，我创建了一个放置区域，人们可以在其中拖放多个文件进行上传，或者单击该区域从磁盘上传单个文件。为此，我有一个隐藏的文件输入，作为 droparea 的覆盖。

我的问题是 p-tag 在 droparea 中占用了一些空间，这使得它不再可点击，而是让您选择 p-tag 文本。任何想法如何使 p-tag 不可选择并触发点击事件，即使您直接点击 p-tag 文本？

我的代码如下：

<div class="droparea">
  <input type="file" id="upload_input" name="upload"/>
  <p>Drop here or click to select from disk</p>
</div>

CSS：

.droparea {
   width: 30%;
   height: 100px;
   border-style: dashed;
   border-width: 3px;
   border-color: blue;
   float: left;
   text-align: center;
   background-color: #fff;
   font-size: calc(8px + 1vw);
}

.droparea input {
   width: 100%;
   height: 100%;
   font-size: 40px;
   opacity: 0;
   filter:alpha(opacity=0);
   display: block;
   cursor: pointer;
}

.droparea p {
    color: black;
    position: relative;
    top: -80px;
    padding: 0px 1px;
}

Answer 1

使用纯 CSS 的一种可能解决方案是 pointer-events: none;

.droparea p {
pointer-events: none;
}

pointer-events CSS 属性指定在什么情况下（如果 任何）特定的图形元素可以成为鼠标的目标 事件。

为了更好的浏览器支持，你可以使用这两个 polyfill

1. https://github.com/jquery/PEP
2. https://github.com/kmewhort/pointer_events_polyfill