css - 使用 CSS 设置输入类型 ="file"的样式(按钮旁边的文本，而不是按钮本身)

Question

我想为文件上传设置常规输入标记的样式。

我发现了许多关于如何使用 css 设置输入按钮(“选择文件”)样式的描述。就我而言，我还想设置按钮旁边的文本样式。

这是我正在处理的具体问题:

此示例中的所有按钮和输入都是全 Angular 的。文件上传按钮也应该如此。

如何设置输入文件旁边的文本样式(例如其他颜色和显示: block ，或任何其他样式来强制换行？)

.btn-secondary, input[type=file]::file-selector-button{
  background-color: var(--color-secondary);
  color: #333 !important;
  transition: all .2s ease-in-out;
}

.btn-secondary:hover, input[type=file]::file-selector-button:hover{
  background-color: #dcdcdc;
}

.btn-secondary:active, input[type=file]::file-selector-button:active{
  background-color: #c1c1c1;
}

input[type=file]::file-selector-button{
  margin: 0;
}

input[type=file] *{
  display: block
}

Answer 1

你可以做这样的事情......在这种情况下，我不会设计输入的样式。我没有显示它，而是将它的功能应用到另一个按钮。

.container {
  padding: 1em;
  border: 1px solid lightgrey;
  margin: 1em;
  border-radius: 4px;
}

input[type=button] {
  background-color: lightgray;
  border: 0;
  border-radius: 4px;
  padding: .5em 2em;
}

#myFileInput {
  display: none;
}

.label {
  display: block;
  margin-top: .5em;
}

<div class="container">
  <input type="file" id="myFileInput" />
  <input type="button" onclick="document.getElementById('myFileInput').click()" value="Choose file" />
  <label for="myFileInput" class="label">No File Chosen</label>
</div>