Chrome CSS - 样式文件输入

Question

以下是我在Chrome中呈现的文件输入：

在IE中它看起来更基本，这很好（尽管与这个特定控件的巨大不一致令人沮丧！）

输入的默认CSS是：

input{
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color:White;
    background-image:url(../images/buttonBG.png);
    height:27px;
    border:1px solid #000;
    border-radius: 7px;
    -moz-border-radius: 7px;
    padding: 5px 20px 5px 20px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
    text-shadow: 0px 1px 2px #000;
}
input:hover{
    text-shadow: 0px 1px 2px #fff;
    background-image:url(../images/buttonBGo.png);
}

正如您所看到的，控件上有两种类型的文本，是否可以单独设置样式？

还有什么方法可以专门选择文件输入吗？像input.file（似乎不起作用）。如果这不可能，我如何删除输入样式应用于它的所有CSS（所以我再次使用空白的平板）。

Answer 1

虽然我从来没有在任何地方实现它，但在研究相同的时候我遇到了这个网址

http://pixelmatrixdesign.com/uniform/

这可能会帮助你。

Answer 2

您无法区分IE中的输入类型。在最近的浏览器中，您可以使用css3属性选择器实现它：

input[type=button] {
   border: 15px solid Red;
}

您可以做的是手动将css类添加到文件输入中：

<input type="file" class="inputFile" />
.inputFile { color: Yellow; }

Answer 3

要进行完全自定义（例如更改浏览按钮的外观），则需要使用标签元素技术。

它是完全语义的，可访问的并且不需要JavaScipt。基本上，您隐藏输入，确保在标签和文件字段上都设置了ID，然后相应地设置标签样式。这是一篇很棒的文章，介绍了该技术以及CodePen（https://codepen.io/bmarshall511/pen/bjyEgq），并展示了它的完成方式：{​​{3}}

[type="file"] + label {
  background: #f15d22;
  border-radius: 5px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}