将input type=file替换为一张图片。

12 浏览
0 Comments

将input type=file替换为一张图片。

就和很多人一样，我想自定义丑陋的input type=file，而我知道这只能通过一些黑客技巧或javascript来实现。但是，问题是，在我的情况下，上传文件按钮只是用于上传图像 (jpeg|jpg|png|gif)，所以我想知道是否可以使用一个“可点击的”图片，它可以完全像一个一样操作（显示对话框并在提交的页面上使用相同的$_FILE）。

我在这里找到了一些解决方法（链接），还有这个有趣的方法（但在Chrome上不起作用 = /）。

当你想为你的文件按钮添加一些样式时，你会怎么做？如果你有任何观点，请点击回答按钮 😉

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

实际上，它可以在纯CSS中完成，并且非常容易......

HTML代码

CSS样式

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}
label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

思路是在标签中绝对定位输入框。将输入框的字体大小设置为较大的值，这将增加“浏览”按钮的大小。然后，使用负的left / top属性进行一些试错，将输入浏览按钮置于标签后面。

定位按钮时，将alpha值设置为1。完成后将其设置为0（这样可以看到正在做什么！）

请确保跨浏览器进行测试，因为它们将以略微不同的大小呈现输入按钮。

0
0 Comments

这对我非常有效：

.image-upload>input {
  display: none;
}

基本上，标签的for属性使得单击标签与单击指定的输入相同。

此外，设置显示属性为none，使得文件输入不会被渲染，完美地隐藏了它。

在Chrome上测试过，但根据web应该在所有主要浏览器上都可以使用。 🙂

编辑：
在此添加JSFiddle：https://jsfiddle.net/c5s42vdz/

0