跨浏览器自定义文件上传按钮的样式
跨浏览器自定义文件上传按钮的样式
我试图按照个人喜好来设置文件上传按钮的样式，但是我没有找到任何不使用JavaScript的确切方法来实现这一点。我在这个主题上找到了两个其他问题的答案，但那里的答案要么涉及JavaScript，要么建议使用Quirksmode的方法。
我对Quirksmode的方法最大的问题是文件按钮仍然具有浏览器定义的尺寸，因此它不会自动调整为放置在其下方的按钮所使用的任何尺寸。我根据它做了一些代码，但它只会占据文件按钮通常占据的空间，所以它不会完全填充父级div，这不符合我的要求。
HTML：
我的标签
CSS：
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
这个例子演示了这种方法的缺陷。在Chrome中，点击第二个演示按钮下方的`!!`仍会打开文件对话框，但在所有其他浏览器中，文件按钮不会占据正确的按钮区域。
是否有任何更可靠的方法来设置文件上传按钮的样式，而不使用任何JavaScript，并且最好尽量少用“hacky”的编码（因为黑客通常会带来其他问题，比如在这个例子中出现的问题）？
问题的原因是，为了在不同浏览器上自定义文件上传按钮的样式，使用了CSS伪元素和属性选择器。具体来说，使用了
::-webkit-file-upload-button
选择器来隐藏默认的文件上传按钮，使用
::before
伪元素添加自定义样式。
解决方法是，使用
<input type="file" class="custom-file-input">
来创建一个自定义的文件上传按钮，并应用相应的CSS样式。然而，这种方法在不同浏览器上的表现是不同的。在IE和Chrome中，它可以正常工作，但在Firefox中不能正常工作，因为Firefox是基于Gecko引擎而不是webkit。
为了解决这个问题，需要使用跨浏览器的解决方案。一个可能的解决方案是使用JavaScript库，如jQuery来处理不同浏览器之间的差异。另一个可能的解决方案是使用更通用的CSS选择器和属性，以确保在不同浏览器上的一致性。
总之，这个问题的出现是因为在尝试自定义文件上传按钮的样式时，使用了特定于webkit的CSS选择器和伪元素，导致在不同浏览器上的不同行为。解决方法是使用跨浏览器的解决方案，如使用JavaScript库或更通用的CSS选择器和属性。
在所有浏览器上都可以使用的自定义文件上传按钮的跨浏览器解决方法
问题的出现原因是原始的解决方法不能在所有浏览器上有效地工作，因此需要找到一个跨浏览器的解决方法。
解决方法是将输入框放在图片的上面，并使用字体大小使其变得巨大，以便用户始终点击上传按钮。使用CSS设置输入框的样式，将其设置为绝对定位并覆盖在图片的上方。同时，将输入框的透明度设置为0，使其不可见。
在HTML中，将输入框包裹在一个
此外，还有一些其他的改进建议，例如只使用opacity:0而不使用filter: alpha(opacity=0)，以及将font-size设置为较小的值，如1px。
这是一个在所有浏览器上都可用的自定义文件上传按钮的解决方案，通过将输入框放在图片上方并设置其样式，使其看起来像一个按钮。
问题的出现原因：
- 无法自定义样式文件上传按钮，限制了设计的自由度。
- 在使用标签包裹隐藏的文件上传按钮时，无法在按钮内部使用标签。
解决方法：
- 使用<label>标签包裹隐藏的文件上传按钮，可以实现更自由的样式定制。
- 使用position:absolute来隐藏输入框，以确保在旧版本的Internet Explorer中也能正常工作。
- 使用:valid和:invalid来显示已选择的文件和指示器。
- 可以通过JavaScript读取input的value属性来显示上传文件的链接。
文章如下：
想要自定义样式文件上传按钮，在我意外的情况下，没有找到其他推荐的地方，所以我在这里发布了这篇文章。
有一种非常简单的方法可以实现这一点，而不限制于浏览器定义的输入框尺寸。只需在隐藏的文件上传按钮周围使用<label>标签。这比通过webkit的内置样式提供的样式更自由。
标签标签的目的是将其上的任何点击事件定向到子输入框，因此使用它，您不再需要使用JavaScript来为您定向点击事件到输入按钮。您可以使用以下内容：
label.myLabel input[type="file"] {
position:absolute;
top: -1000px;
}
/***** Example custom styling *****/
.myLabel {
border: 2px solid #AAA;
border-radius: 4px;
padding: 2px 5px;
margin: 2px;
background: #DDD;
display: inline-block;
}
.myLabel:hover {
background: #CCC;
}
.myLabel:active {
background: #CCF;
}
.myLabel :invalid + span {
color: #A44;
}
.myLabel :valid + span {
color: #4A4;
}
我使用固定位置来隐藏输入框，以确保它在古老的Internet Explorer版本中也能正常工作（模拟的IE8在visibility:hidden或display:none文件输入上不起作用）。我在模拟的IE7及以上版本中进行了测试，效果非常好。
需要注意的是：
1. 不能在<label>标签内使用<button>，因此您必须自己定义按钮的样式。
2. 如果定义了for属性，则使用与for属性相同id的输入触发<label>上的输入。
关于标签内没有按钮的问题，我认为这不是一个大问题。您可以将任何元素样式设置成按钮的样式，即使它实际上不是一个按钮。当您单击它时，功能由input[type=file]实现。
这真是太棒了。我的唯一问题是在选择文件后，它实际上并没有显示已选择的文件。有没有办法显示已选择文件的指示器？
这就是在CSS中使用:valid和:invalid的原因。或者您可以使用类似这个的方法来更改文本。但是，您无法以这种方式显示所选文件的确切内容。
是否可以显示已上传文件的链接，就像默认情况下那样？或者使用JS来获取并单独显示它？这将使其成为100%的解决方案。现在，用户不知道文件是否已添加。
是的，可以通过JavaScript读取input的value属性来实现这一点。另外，用户可以通过输入框的颜色知道他们是否选择了文件。一旦选择了文件，颜色就会改变（从红色到绿色）。
非常感谢。颜色的改变有所帮助，我还会获取值。 🙂
这个解决方案也适用于position:absolute。为什么这很重要？这是因为position:absolute在浏览器的支持范围比position:fixed更广。
但是，它没有显示文件名。