html - 表单评估为空所需输入时如何控制父元素边框颜色？

Question

我希望 .inf__drop-area div 边框变为红色，并在评估表单并且此 div 内的 required 输入字段为空时关注它。 https://jsfiddle.net/oLdw7mxp/

.inf__drop-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 120px;
    width: 100%;
    max-width: 280px;
    background-color: #e7ebf3;
    border: 2px solid #0058ff;
    padding: 0 45px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}   

<form>
  <div class="inf__drop-area">
      <span class="inf__hint">drop file here</span>
      <input type="file" multiple="" name="files" accept="image/*" required>
    </div>
    <button type='submit'>submit</button>
</form>

有什么CSS解决方案吗？

Answer 1

我会捕获点击事件并检查输入中文件的长度。

function validate(e){
    if(filebx.files.length == 0){
        droparea.style.borderColor = "red";
    }
}

.inf__drop-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 120px;
    width: 100%;
    max-width: 280px;
    background-color: #e7ebf3;
    border: 2px solid #0058ff;
    padding: 0 45px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}   

<form>
  <div class="inf__drop-area" id="droparea">
      <span class="inf__hint">drop file here</span>
      <input type="file" id="filebx" multiple="" name="files" accept="image/*" required>
    </div>
    <button type='submit' onclick="validate()">submit</button>
</form>