如何组合CSS伪类适配必填与非必填文件上传字段？

问题背景 #

有两个带拖拽容器的文件上传字段，一个为必填（含required属性），另一个非必填（无required属性）。需要通过CSS统一控制两种字段的.success和.default区块显示隐藏，现有CSS仅对必填字段生效，尝试:not(required)与:valid组合时写法错误，无法生效。

现有代码 #

HTML结构 #

<div class="form-group file-area">
    <input type="file" class="fileupload" name="fileinput" id="fileinput" data-formid="editform" multiple="multiple"/>
       <div class="file-dummy">
          <div class="success"><h1><i class="fa fa-spinner fa-spin"></i></h1></div>
          <div class="default">my message</div>
       </div>
 </div>

当前CSS（仅支持必填字段） #

.file-area input[type=file]:valid:required + .file-dummy {
  border-color: #bbe5ed ;
  background-color: #217485;
}

.file-area input[type=file]:required:valid + .file-dummy .success {
  display: inline-block;
  background-color:green;
}

解决方案 #

可以通过区分:required和:not(:required)伪类，结合:valid状态编写适配两种场景的CSS规则，以下是完整实现：

/* 1. 默认状态：隐藏success，显示default */
.file-area .file-dummy .success {
  display: none;
}
.file-area .file-dummy .default {
  display: inline-block;
}

/* 2. 必填/非必填字段选中文件后，统一设置file-dummy样式 */
.file-area input[type=file]:valid + .file-dummy {
  border-color: #bbe5ed;
  background-color: #217485;
}

/* 3. 选中文件后，显示success、隐藏default（统一规则，无需区分必填） */
.file-area input[type=file]:valid + .file-dummy .success {
  display: inline-block;
  background-color: green;
}
.file-area input[type=file]:valid + .file-dummy .default {
  display: none;
}

/* 可选：必填字段未选文件时的错误提示样式 */
.file-area input[type=file]:required:invalid + .file-dummy {
  border-color: #ffcccc;
  background-color: #ffebee;
}

关键说明 #

• 你的错误写法重复了.file-area input[type=file]选择器，正确的伪类组合是:not(:required):valid（注意:required是伪类，括号内必须带冒号）。
• 如果必填和非必填字段的选中状态样式完全一致，可以直接用:valid统一匹配，无需拆分规则，简化代码。
• 补充默认状态的显示隐藏规则，确保未选中文件时始终显示.default区块。

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