Question

我已经创建了一个HTML5表单，其中包含自定义错误消息并通过webshim进行验证，该表单主要是正常工作和显示，但气泡不会显示在复选框下方，默认情况下位于左上角页。我不确定我的CSS是否会抛弃泡泡，或者它是否试图在我不显示的元素下显示。

这是我的标记（结构有点不寻常，因为我需要以两种不同的形式显示提交按钮）：

<div id="appraisals-form" class="contact-form">
    <form id="appform" role="form" method="post">
        <div class="section-bar"></div>
        <p class="section-title">Step 1</p>

        <label for="name"><span>Name</span><input type="text" class="input-field" name="name" required data-errormessage-value-missing="Please enter your name." /></label>
        <label for="email"><span>Email</span><input type="email" class="input-field" name="email" required data-errormessage-value-missing="Please enter your email address." /></label>
        <label for="phone"><span>Phone</span><input type="tel" class="input-field" name="phone" required data-errormessage-value-missing="Please enter your phone number." /></label>
        <label for="art-type" class="wrap"><span class="wrap-lg">Type of Artwork</span><span class="wrap-sm">(i.e. sculpture, painting...)</span><input class="input-field" type="text" name="art-type" required data-errormessage-value-missing="Please enter your item's type of artwork."></label>
        <label for="artist" class="wrap"><span class="wrap-lg">Artist Name</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="artist" required data-errormessage-value-missing="Please enter your item's artist."></label>
        <label for="title" class="wrap"><span class="wrap-lg">Title of Piece</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="title" required data-errormessage-value-missing="Please enter your item's title."></label>
        <label for="measurements"><span>Measurements</span><input type="text" class="input-field" name="measurements" required data-errormessage-value-missing="Please enter your item's measurements." /></label>
        <label for="date" class="wrap"><span class="wrap-lg">Date / Age</span><span class="wrap-sm">(if known)</span><input class="input-field" type="text" name="date" required data-errormessage-value-missing="Please enter your item's date / age."></label>
        <label for="condition"><span>Condition</span><textarea name="condition" class="textarea-field" required data-errormessage-value-missing="Please enter your item's condition."></textarea></label>
        <label for="doc" class="wrap"><span class="wrap-lg">Documentation</span><span class="wrap-sm">(certificates, receipts, previous appraisals, etc.)</span><textarea name="doc" class="textarea-field" required data-errormessage-value-missing="Please enter your item's documentation."></textarea></label>
        <label for="writing" class="wrap"><span class="wrap-lg">Writing / Labels</span><span class="wrap-sm">(text or any writing or labels on the art)</span><textarea name="writing" class="textarea-field" required data-errormessage-value-missing="Please enter your item's text / labels."></textarea></label>
        <label for="purchase-hist" class="wrap"><span class="wrap-lg">Purchase History</span><span class="wrap-sm">(date, cost, location, etc.)</span><textarea name="purchase-hist" class="textarea-field" required data-errormessage-value-missing="Please enter your item's purchase history."></textarea></label>
        <label for="additional" class="wrap"><span class="wrap-lg">Additional Details</span><span class="wrap-sm">(anything else you know)</span><textarea name="additional" class="textarea-field" required data-errormessage-value-missing="Please enter your item's additional details."></textarea></label>
        <fieldset id="appraisals-text-wrap">
            <legend>Type of Appraisal</legend>
            <input type="checkbox" data-grouprequired="" id="insurance" name="app-type" value="Insurance" /><label for="insurance">Insurance</label>
            <input type="checkbox" id="donation" name="app-type" value="Donation" /><label for="donation">Donation</label>
            <input type="checkbox" id="estate" name="app-type" value="General Estate Planning" /><label for="estate">General Estate Planning</label>
        </fieldset>

    </form>

    <div class="section-bar"></div>
    <p class="section-title">Step 2</p>
    <p>Please upload images of all sides of your artwork.</p>
    <div style="clear: both;"></div>
    <form action="file-upload.php" class="dropzone" id="appraisals-upload">
    <div class="dz-message">
        <p><img src="img/ui/upload-cloud.png" /><p/>
        <p><img src="img/ui/browse-button.jpg" /></p>
        <p>Or drag & drop</p>
    </div>
    </form>

    <input type="checkbox" data-grouprequired="" name="tac" value="Accepted T&Cs" /><label for="tac" style="font-size: 14px; font-weight: bold;">Terms & Conditions <span style="width: 100%; padding: 5px 0 13px; font-size: 14px; text-align: left; text-transform: none;">Duis lobortis nulla a eros porttitor, ut congue elit commodo. Nunc ut dapibus elit. Suspendisse euismod rhoncus felis, id vulputate mauris posuere vitae. Praesent bibendum maximus nibh, nec tempor diam blandit in. Praesent non metus in odio vehicula cursus vulputate quis quam. Nulla varius massa ac libero commodo imperdiet. Fusce tincidunt metus sapien, sed fringilla nibh vulputate eget. Suspendisse sodales nisi quis hendrerit porttitor. Morbi in augue sapien. Maecenas ultricies, nisl vitae vehicula vulputate, nunc tellus sagittis turpis, nec laoreet quam velit non nunc. In aliquam libero a tellus commodo, at aliquet risus imperdiet. Fusce finibus a nulla et facilisis.</span></label>

    <div style="clear: both;"></div>

    <div class="centred-button"><input type="submit" name="submit" value="" form="appform" class="submit-button" /></div>

</div>

演示：http://jsfiddle.net/6bkv2vfz/。

任何帮助都会非常感激！

Answer 1

试试这个：

input[type="checkbox"] {
    /* display: none; */
    visibility: hidden;
    margin-right: -15px;
}

当您显示无显示时，他们找不到复选框的当前位置

webshim HTML5验证气泡无法正确显示

1 个答案: