javascript - 如何启用显示 :none? 所需的输入

Question

我想在"file"类型的输入中显示“必需”警报，这是隐藏的(显示:无)，因为它必须具有特定的样式，并且该样式应用于其相应的标签。下面是一个例子:

<label for="add-photo-input" id="add-photo">Adjuntar Foto</label>
<input id="add-photo-input" type="file" required name="add-photo-input" style="display: none;">

Answer 1

您可以使用 JavaScript。

<script>
function check() {
    var x = document.getElementById("add-photo-input").value;
    if (x == "") {
        document.getElementById("add-photo").style="border:.1em solid blue";
        alert("Please add photo");
        return false;
    }
} function reset() {
    document.getElementById("add-photo").style="border:none";
}
</script>

并确保在单击提交按钮时调用检查函数:

<label for="add-photo-input" id="add-photo" onclick="reset()">Adjuntar Foto</label>
<input id="add-photo-input" type="file" required name="add-photo-input" style="display:none">
<input onclick="check()" id="submit" type="submit" />

获得更多信息会很有帮助，是否有原因导致您无法更改文件输入元素的样式以匹配您想要的样式？