如何在FireFox中使用纯CSS设置HTML文件上传按钮的样式 [英] How to style HTML file upload button with pure CSS in FireFox

问题描述

我尝试了很多不同的方法来设计输入内的 input [type =button] > [type =file ）。

我发现了一种使用纯的 CSS 用户可以看到他们选择的文件名。然而，它留下了一个特别流行的浏览器，firefox。

我已经找到了几种方法来做这个通过使用 JS
链接到JS或隐藏方法：



或者直接隐藏输出框的文件名。 ol>

www.quirksmode.org

www.shauninman.com li>

www.appelsiini.net

纯粹的CSS方法我完全在chrome中找到了，之后又在

这个 CSS / code>方法通过选择元素来工作通过它的伪类。

在Google Chrome中，这是通过以下方式完成的：

input.formelement :: webkit-file-upload-button {background-color：＃443}

其中， input.formelement 是我的文件上传表单的类， -webkit-file-upload-button


在Internet Explorer（10+）中，这是通过以下方式完成的：





input.formelement :: - ms-browse {background-color：＃443}

， input.formelement 是我的文件上传表单的类， -ms-browse 是浏览器特定的伪元素。

有没有办法在没有Javascript的FireFox中做到这一点？

解决方案

我不相信有一种方法可以在仅使用CSS的Firefox中执行此操作。

也无法设置样式或更改文字未选择文件。如果你真的想要一个跨浏览器的解决方案，你最好的选择仍然是使用一个假按钮触发器点击实际的隐藏按钮。使用JS可能是明显的选择，但不是唯一的方法：
$ b

JS方法：
$ b $

  // JS  -  DOM Elementsvar browse_button = document.getElementById（'browse-button'）; var file_input = document.getElementById（'file-input'）; //处理程序触发点击文件inputbrowse_button.addEventListener（'click'，function（e）{file_input.click（）;}）;  

  / * CSS隐藏文件输入* /＃file-input {display：none;}＃browse-button {/ * TODO：styles * /} <！ -  Simple HTML  - >< input  

：

一个简单的HTML + CSS也可以工作，特别是如果你不需要文件名称标签。一个快速的HTML + CSS解决方案：

* {box-sizing：border-box;} input [type =文件] {位置：绝对;顶部：-5px; / *边框的大小* /左：5px; / *边框的大小* / box-sizing：border-box;保证金：0;填充：0; width：240px; height：50px;边框：1px纯红色;不透明度：0; / *隐藏实际输入* / cursor：pointer} .fakeFileButton {position：relative;保证金：0;填充：0; width：240px; / *与按钮相同* / height：50px; / *与按钮相同* / background-color：rgb（50,50,238）; border：5px solid rgb（128,128,128）; font-size：18px;颜色：rgb（255,255,255）; text-align：center; line-height：40px;}。fakeFileButton：hover {background-color：rgb（100,150,255）;颜色：rgb（0,0,0）;}

< div class =fakeFileButton>在计算机上浏览文件< input type =file>< / div>

b $ b

如果你想添加一个假的文件名称标签，这也是可能的，但是你必须使用JS来设置一个处理程序来观察 change 事件，回调函数读取 real_input.value 并将其写入 fake_label.innerHTML 。

I have tried many different techniques to style the input[type="button"] that is inside of an input[type="file"].

I have found one technique that uses pure CSS that allows the user to see the file name they have selected. However, it leaves out one particularly popular browser, firefox.

I have found several ways to "do" this by using JS or by simply outright hiding the output box for filename.

Links to JS or hiding methods.:

1. www.quirksmode.org
2. www.shauninman.com
3. www.appelsiini.net

The pure CSS methods I completely stumbled upon in chrome, and afterwards found again in an answer to styling an input type file button

This CSS method works by selecting the element by its pseudo class.

In Google Chrome this is done by:

input.formelement::-webkit-file-upload-button {background-color: #443}

Where, input.formelement is the class of my file upload form and -webkit-file-upload-button is the browser-specific pseudo element.

In Internet Explorer (10+) this is done by:

input.formelement::-ms-browse {background-color: #443}

Once again, input.formelement is the class of my file upload form and -ms-browse is browser-specific pseudo element.

Is there any way to do this in FireFox without Javascript?

解决方案

I don't believe there is a way to do this in Firefox using CSS only.

There is also no way to style or change the text "No file selected." That file name label also appears differently in various browsers.

If you truly want a cross-browser solution, your best choice is still to use a fake "button" that triggers clicks on the actual hidden button. Using JS may be the obvious choice, but not the only way:

JS Method:

// JS - DOM Elements
var browse_button = document.getElementById('browse-button');
var file_input = document.getElementById('file-input');

// Handler to trigger click on file input
browse_button.addEventListener('click', function(e) {
   file_input.click();
});

/* CSS to hide file input */
#file-input {
  display: none;
}
#browse-button {
  /* TODO: styles */
}

<!-- Simple HTML -->
<input type="file" id="file-input" />
<button type="button" id="browse-button">Browse</button>

Pure HTML/CSS Method:

A simple HTML + CSS can also work, especially if you don't need the "file name label". A quick-dirty HTML + CSS solution:

* {
  box-sizing: border-box;
}
input[type=file] {
  position: absolute;
  top:-5px; /* size of border */
  left:-5px; /* size of border */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 240px;
  height: 50px;
  border: 1px solid red;
  opacity: 0; /* hide actual input */
  cursor: pointer
}

.fakeFileButton {
  position: relative;
  margin: 0;
  padding: 0;
  width: 240px; /* same as button */
  height: 50px; /* same as button */
  background-color: rgb(50,50,238);
  border: 5px solid rgb(128,128,128);
  font-size: 18px;
  color: rgb(255,255,255);
  text-align: center;
  line-height: 40px;
}
.fakeFileButton:hover {
  background-color: rgb(100,150,255);
  color: rgb(0,0,0);
}

<div class="fakeFileButton">
    Browse File on Computer
    <input type="file">
</div>

If you want to add a fake file name label, it's also possible, but you have to use JS to set up a handler to observe for change events, with a callback that reads the real_input.value and write it into fake_label.innerHTML.

这篇关于如何在FireFox中使用纯CSS设置HTML文件上传按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！