Php 格式类型=带有CSS的文本按钮

我使用一个修改过的输入按钮让用户上传文件

我找到了这把小提琴，并使用了相同的代码，成功地生成了一个工作CSS按钮。

上传
.文件上传{
位置：相对位置；
溢出：隐藏；
利润率：10px；
}
.fileUpload输入.upload{
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
}

唯一的问题是，一旦我使用按钮上载文件，通常显示在按钮右侧的消息（命名已选择的文件）就消失了

---

因此，用户无法判断文件是否已被选中。有办法解决这个问题吗？

使用js/jQuery读取上传的文件名，并将其作为文本放在

内（或任何其他地方）

---

这是由于

.fileUpload input.upload

css规则上的

不透明度：0

造成的。将其更改为类似于5的值，您将看到原始文件控件出现。但是，以这种方式使用文件上载控件通常需要使用所选文件填充的标签/span。您可以从JavaScript获取所选文件的名称。

我不确定您的要求是什么，但您似乎正在尝试设置文件输入按钮的样式

如果您不需要支持旧浏览器，可以使用-webkit file upload按钮和-ms browse属性来定位特定的按钮。这只适用于IE10及以上版本和现代webkit浏览器。我根据您的css修改了以下内容，因此它应该可以工作：

.fileUpload {
    position: relative;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
}
input.upload::-webkit-file-upload-button{
  visibility: hidden;
}

input.upload::-ms-browse{
  visibility: hidden;
}

这将允许您仅隐藏按钮部分，并且您可以将按钮放置在现有自定义按钮的顶部。隐藏按钮后，还可以直接将输入字段作为目标。例如

input.upload::before{
    content: 'Uploads';
    background:#00f;
    color:#fff;
}

---

对不起，我的无知，但你能不能更具体一点，如何做到这一点？我将您的代码放在span内的标记中，但它不起作用，但我猜我遗漏了什么。@Kevin要运行他的脚本，您需要包含jquerylibrary@Kevin是的，您缺少包含的jQuery和

$（document）.ready（function（）{/*mycode*/}）

.fileUpload {
    position: relative;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
}
input.upload::-webkit-file-upload-button{
  visibility: hidden;
}

input.upload::-ms-browse{
  visibility: hidden;
}

input.upload::before{
    content: 'Uploads';
    background:#00f;
    color:#fff;
}