Pure CSS3 はラジオと checkbox_html/css_WEB-ITnose を美しくします

タイトルにあるように、CSS3 は主にラジオとチェックボックスの美化効果を実現するために使用されますが、互換性はあまり良くありません。PC は Chrome ブラウザーのみをサポートします (IE と Firefox のテストは不可能であり、それ以上はありません)。他人のテスト）。その後、WeChat と QQ へのアクセスも正常になります。 LZが提供する機能はWeChat上で表示できればよいため、詳しくは検討しませんでした。

もちろん、互換性がないと言われていますが、それでも、なぜ互換性がないのかを説明する必要があります: input[type=radio]:前に。疑似クラス セレクター :beofre は、主流ブラウザーの P、span、div およびその他のタグにいくつかのスタイルを挿入できますが、Chrome はこの機能をサポートしているだけであり、この例はこの機能に基づいて開発されています。他に言うことはあまりなく、コードとスクリーンショットだけです。

効果のスクリーンショット:

HTML コード:

<label for="test1">Test for test1 </label>        <input class="radio" type="radio" ID="test1" name="test" value="test1"/>        <label for="test2">Test for test2 </label>        <input class="radio" type="radio" ID="test2" name="test" value="test2"/>        <br>        <br>        <br>        <label for="check1">check1</label>        <input id="check1" name="check"  value="check1" type="checkbox" class="checkbox"/>        <label for="check2">check2</label>        <input id="check2" name="check" value="check2" type="checkbox" class="checkbox"/>        <label for="check3">check3</label>        <input id="check3" name="check" value="check3" type="checkbox" class="checkbox"/>        <label for="check4">check4</label>        <input id="check4" name="check" value="check4" type="checkbox" class="checkbox"/>

次に CSS コード:

input[type=radio]{            font-size:1em;            visibility: hidden;            position: relative;            display: inline-block;            width: 1em;            height: 1em;        }        input[type=radio]:before{            font-size:1em;            top:12%;            display: inline-block;            position: absolute;            content:' ';            visibility: visible;            height: 1em;            width: 1em;            display: block;            background: url("../img/no.png") no-repeat;            background-size: 1em 1em;        }        input[type=radio]:checked:before{            font-size:1em;            content:' ';            visibility: visible;            height: 1em;            width: 1em;            background: url("../img/yes.png") no-repeat;            background-size: 1em 1em;        }        input[type=checkbox]{            font-size:1em;            visibility: hidden;            position: relative;            display: inline-block;            width: 1em;            height: 1em;        }        input[type=checkbox]:before{            top:12%;            display: inline-block;            position: absolute;            content:' ';            visibility: visible;            height: 1em;            width: 1em;            display: block;            background: url("../img/checkbox_no.png") no-repeat;            background-size: 1em 1em;        }        input[type=checkbox]:checked:before{            content:' ';            visibility: visible;            height: 1em;            width: 1em;            background: url("../img/checkbox.png") no-repeat;            background-size: 1em 1em;        }

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーさんの許可を得て転載することは許可されていません。