怎么把<input type="file" id="fileInput" accept=".jpg, .png" /> 外观做成一个加号

要将`<input type="file" />`标签的外观隐藏，同时只显示一个加号图标，你可以通过CSS样式来实现，尤其是利用伪元素（`:before`）添加自定义内容。以下是一个简单的示例：

首先，在HTML中保持基本的输入元素不变：

<input type="file" id="fileInput" accept=".jpg, .png" />

然后，添加一个外部的按钮元素，附带一个加号的`<span>`元素：

<button id="customFileButton">
  <span class="file-icon">+</span>
</button>

接下来，使用CSS来设置按钮的样式和伪元素的内容：

#customFileButton {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.file-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em; /* 根据需求调整大小 */
  color: #ccc;
}

/* 鼠标悬停效果 */
#customFileButton:hover .file-icon {
  color: black;
}

/* 当前活动状态 */
#customFileButton[aria-label="选择文件"]:hover .file-icon,
#customFileButton[aria-label="选择文件"]:focus-within .file-icon {
  color: #007BFF; /* 或者你喜欢的颜色 */
}

当用户点击按钮时，我们可以通过JavaScript来模拟`<input type="file">`的行为：

document.getElementById('customFileButton').addEventListener('click', function() {
  document.getElementById('fileInput').click();
});

这样，当你点击“+”图标时，文件选择器会出现。请注意，这种方法依赖于用户手动点击加号而非直接点击文件输入区域，某些情况下可能不符合预期。