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)，展示了它是如何完成的：https://benmarshall.me/styling-file-inputs/

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

Answer 4

今天有伪元素

::file-selector-button

。

像这样使用它：

input[type=file]::file-selector-button {
  border: 2px solid #6c5ce7;
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #a29bfe;
  transition: 1s;
}

input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button