使用 CSS 格式化 type=text 按钮答案

【问题标题】：Format type=text button with CSS使用 CSS 格式化 type=text 按钮
【发布时间】：2014-07-01 07:29:05
【问题描述】：

我正在使用修改后的输入按钮让用户上传文件。

我找到了这个小提琴并使用了相同的代码并成功生成了一个有效的 CSS 按钮。 http://jsfiddle.net/geniuscarrier/ccsGK/

<div class="fileUpload btn btn-primary">
    <span>Uploads</span>
    <input type="file" class="upload" />
</div>

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

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

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

【问题讨论】：

标签： php html css button file-upload

【解决方案1】：

使用 js/jQuery 读取上传的文件名并将其作为文本放置在 <span></span> 中（或任何其他位置）。

$('.upload').change(function(){
    $('.fileUpload > span').text($(this).val());
});

【讨论】：

对不起，我的无知，但你能更具体一点，如何做到这一点？我将您的代码放在跨度内的
@Kevin 运行他的脚本，你需要包含 jquery 库
@Kevin 是的，你缺少包含的 jQuery 和 $(document).ready(function(){/* my code */})

【解决方案2】：

这是由于您的 .fileUpload input.upload css 规则中的 opacity: 0。将其更改为 5，您将看到原始文件控制出现。但是，以这种方式使用文件上传控制通常需要一个标签/跨度，该标签/跨度应该填充所选文件。所选文件的名称，可以从 JavaScript 中获取。

【讨论】：

【解决方案3】：

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

如果您没有需要支持旧浏览器的要求，您可以使用 -webkit-file-upload-button 和 -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;
}

【讨论】：