如何为文件输入按钮与「未选择文件」区域添加间距？

问题描述 #

我希望在「选择文件」按钮和「未选择文件」区域之间添加间距，尝试为按钮添加右侧外边距、为输入框设置gap均无效果。

我的HTML代码 #

<p class="mb-0 f-w-600">{{'BUSINESS_EDIT_LOGO' | translate}}</p>
<div class="file-input-container form-group mb-3">
  <input 
    class="form-control" 
    type="file" 
    formControlName="logo"
    (change)="fileChangeEvent($event)"
  >
</div>

我的CSS代码 #

.form-control[type="file"]{
  gap: 15px;
}
  
.form-control[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 6px 12px 6px 12px;
  margin-right: 10px; 
}

解决方案 #

原因分析 #

1. gap属性仅对flex/grid容器生效，默认情况下input[type="file"]不属于这类容器，因此设置gap无效。
2. 原生文件输入框的按钮样式受浏览器默认样式影响，你设置的margin-right可能被浏览器内置样式覆盖。

具体调整方案 #

方案1：将输入框转为flex容器

通过把input[type="file"]设置为flex容器，既可以让gap生效，也能确保按钮的外边距正常工作：

.form-control[type="file"]{
  display: flex;
  align-items: center;
  gap: 15px; /* 直接用gap控制间距，无需再给按钮加margin-right */
}
  
.form-control[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 6px 12px;
}

方案2：针对不同浏览器内核单独设置样式

部分浏览器（如Firefox、Chrome）对文件输入按钮的伪元素支持不同，针对性设置可提升兼容性：

/* 适配WebKit/Chrome内核浏览器 */
.form-control[type="file"]::-webkit-file-upload-button {
  border-radius: 4px;
  padding: 6px 12px;
  margin-right: 15px;
}

/* 适配Firefox浏览器 */
.form-control[type="file"]::-moz-file-upload-button {
  border-radius: 4px;
  padding: 6px 12px;
  margin-right: 15px;
}

方案3：提升样式优先级

如果上述方案无效，检查是否有其他CSS规则优先级更高覆盖了当前样式，可通过增加父选择器提升优先级：

.file-input-container .form-control[type="file"]::file-selector-button {
  border-radius: 4px;
  padding: 6px 12px;
  margin-right: 15px;
}

内容的提问来源于stack exchange，提问作者User9123