我希望 .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解决方案吗?
最佳答案
我会捕获点击事件并检查输入中文件的长度。
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>
关于html - 表单评估为空所需输入时如何控制父元素边框颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53878194/