1

入力を非表示にし、ラベルにネストされたスパンをターゲットにしてスタイリングするチェックボックスがあります。http://jsfiddle.net/rz6np/を参照してください

HTML:

<input id="confirm" type="checkbox" name="confirm" value="1" required="required" />
<label for="confirm"><span>+</span>Confirm</label>

CSS:

    input[type="checkbox"] {
    display: none;
}

form input[type="checkbox"] + label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 1px 10px 5px 0;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid grey;
    color: #fff;
    font-size: 15px;
    padding: 2px 2px;
}

input[type="checkbox"]:checked + label span {
    color: #000;
}

入力が非表示になっているため、html5requiredポップアップが表示されません。強制的に表示させる方法はありますか？

4

2 に答える 2

0

デザインがこのようなものか、これに似ていると仮定して、display: none を使用しないでください。スタイル付きチェックボックスはそれをカバーするのに十分な大きさであるため、相対位置または絶対位置、および適切な z-index でチェックボックスの上に配置するだけです。

それが完全にカバーされない場合でも、チェックボックスで visibility:hidden を使用することで回避できます。フィールドが非表示になっていても Firefox でポップアップが表示されますが、他のブラウザーとその動作を確認する必要があります。

于 2013-04-30T21:38:28.363 に答える