css – 显示自定义复选框的HTML5验证消息

2023年1月10日 213次阅读

我的注册表单使用
HTML5验证来验证必填字段是否已完成.

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form action="https://www.salesforce.com" method="POST" id="signup">
                <div class="form-group">
                    <label for="first_name">First name</label>
                    <input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="form-control" required>
                </div>
                <div class="checkbox">
                    <label>
                        <input id="tou" name="tou" type="checkbox" value="1" required="required"/>
                        I have read and agree to the terms of use.
                    </label>
                </div>
                <input type="submit" name="submit" class="btn">
            </form>
        </div>
    </div>
</div>

我已经使用CSS替换了自定义.svg复选框的默认复选框.

input[type=checkbox] {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    visibility: hidden;
}

input[type=checkbox]:before {
    content: url(/static/img/unchecked.svg);
    visibility: visible;
}

input[type=checkbox]:checked:before {
    content: url(/static/img/checked.svg);
}

虽然HTML5验证适用于其他字段,但我无法使其适用于自定义复选框.我尝试了jQuery validation with custom CSS checkbox中显示的方法但没有成功.有任何想法吗？

最佳答案 默认的HTML5验证错误消息不可见,因为您使用以下命令隐藏它：

input[type=checkbox] {
    visibility: hidden;
}

试试这个：

input[type=checkbox] {
    opacity: 0;
}

小提琴：https://jsfiddle.net/xfosb27j/2/

点赞