{"id":102,"date":"2021-01-14T19:24:49","date_gmt":"2021-01-14T11:24:49","guid":{"rendered":"https:\/\/\/?p=102"},"modified":"2022-01-16T15:26:26","modified_gmt":"2022-01-16T07:26:26","slug":"radio-button-and-checkbox-customize","status":"publish","type":"post","link":"https:\/\/\/radio-button-and-checkbox-customize\/","title":{"rendered":"Radio button\u548cCheckbox\u653e\u5927\u4e26\u81ea\u8a02\u6a23\u5f0f"},"content":{"rendered":"\n<p>Radio button\u548cCheckbox\u5728\u96fb\u8166\u7248\u96d6\u7136\u5f88\u5c0f\uff0c\u6c92\u7279\u5225\u6ce8\u610f\u7684\u8a71\u4e5f\u4e0d\u6703\u611f\u89ba\u5230\u7279\u5225\u96e3\u6309\uff1b<br>\u4f46\u5982\u679c\u4f60\u4e5f\u5728\u7169\u60f1\u70ba\u4e86<a href=/index.html"https:\/\/zh.wikipedia.org\/wiki\/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1\" target=\"_blank\" rel=\"noreferrer noopener\">RWD(Responsive Web Design\u97ff\u61c9\u5f0f\u8a2d\u8a08)<\/a>\uff0c\u800c\u4e0d\u5f97\u4e0d\u628a\u6309\u9215\u900f\u904eCSS\u7684\u65b9\u5f0f\u8b93\u5b83\u770b\u8d77\u4f86\u81f3\u5c11\u8b8a\u5927\u9846\uff0c\u9019\u88e1\u5c31<strong>\u7528\u7a0b\u5f0f\u78bc\u76f4\u63a5\u8b93\u4f60\u5b78\u6703<\/strong>\uff0c\u4e0d\u53ea\u8b93\u4f60\u80fd\u5c07\u6309\u9215\u8b8a\u5927\u9846\uff0c\u4e5f\u80fd\u6559\u4f60\u628a\u6309\u9215<strong>\u900f\u904eCSS\u81ea\u8a02\u6210\u60f3\u8981\u7684\u6a23\u5f0f<\/strong>\u5662\uff01<br>(\u5ef6\u4f38\u95b1\u8b80\uff1a<a href=/index.html"https:\/\/\/rwd-two-line\/\" target=\"_blank\" rel=\"noreferrer noopener\">RWD\u6559\u5b78-\u53ea\u8981\u5169\u884c\u5c31\u80fd\u8f15\u9b06\u898b\u6548\u7684\u5be6\u4f5c\u7d93\u9a57<\/a>)<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_64 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\">\u5167\u5bb9\u76ee\u9304<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-66130bf48b3be\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-66130bf48b3be\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=/index.html"https:\/\/\/radio-button-and-checkbox-customize\/#Radio_button%E5%92%8CCheckbox%E9%A0%90%E8%A8%AD%E6%A8%A3%E5%BC%8F\" title=\"Radio button\u548cCheckbox\u9810\u8a2d\u6a23\u5f0f\">Radio button\u548cCheckbox\u9810\u8a2d\u6a23\u5f0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=/index.html"https:\/\/\/radio-button-and-checkbox-customize\/#%E5%96%AE%E7%B4%94%E6%94%BE%E5%A4%A7%E6%8C%89%E9%88%95%E5%AF%AC%E9%AB%98\" title=\"\u55ae\u7d14\u653e\u5927\u6309\u9215\u5bec\u9ad8\">\u55ae\u7d14\u653e\u5927\u6309\u9215\u5bec\u9ad8<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=/index.html"https:\/\/\/radio-button-and-checkbox-customize\/#%E8%87%AA%E8%A8%82Radio_button%E5%92%8CCheckbox%E6%8C%89%E9%88%95%E6%A8%A3%E5%BC%8F\" title=\"\u81ea\u8a02Radio button\u548cCheckbox\u6309\u9215\u6a23\u5f0f\">\u81ea\u8a02Radio button\u548cCheckbox\u6309\u9215\u6a23\u5f0f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=/index.html"https:\/\/\/radio-button-and-checkbox-customize\/#%E7%B5%90%E8%AB%96\" title=\"\u7d50\u8ad6\">\u7d50\u8ad6<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"has-text-align-left has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"Radio_button%E5%92%8CCheckbox%E9%A0%90%E8%A8%AD%E6%A8%A3%E5%BC%8F\"><\/span>Radio button\u548cCheckbox\u9810\u8a2d\u6a23\u5f0f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"131\" height=\"207\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/01\/radio_btn_ori-1.png?resize=131%2C207&#038;ssl=1\" alt=\"\u539f\u672c\u6a23\u5f0f\" class=\"wp-image-106\" title=\"\u539f\u672c\u6a23\u5f0f\" data-recalc-dims=\"1\"\/><figcaption>\u539f\u672c\u6a23\u5f0f<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u5c0d\u6c92\u932f\uff0c\u4e0a\u9762\u9019\u500b\u5716\u7247\u5c31\u662f\u6700\u539f\u59cb\u7684\u6a23\u5f0f\uff0c\u6309\u9215\u5c0f\u5230\u9023\u6e38\u6a19\u8981\u9ede\u5176\u5be6\u90fd\u6709\u9ede\u5c0f\u56f0\u96e3\uff0c\u96d6\u7136\u8aaa<strong>\u5927\u90e8\u5206\u5728\u61c9\u7528\u4e0a\u6703\u642d\u914d\u6587\u5b57<\/strong>\uff0c\u53ea\u8981\u900f\u904e<strong>label\u6a19\u7c64\u7684for\u5c6c\u6027\u9023\u7d50input\u6a19\u7c64\u7684id\u5c6c\u6027<\/strong>\uff0c\u9019\u6642\u9ede\u64ca\u6587\u5b57\u5c31\u80fd\u5b8c\u6210\u9078\u64c7\u4e86\uff01<\/p>\n\n\n\n<p>\u4f46\u901a\u5e38\u7cfb\u7d71\u505a\u51fa\u4f86\u7b2c\u4e00\u4ef6\u4e8b\u90fd\u6703\u8981\u6c42\u76f4\u63a5\u653e\u5927\u6309\u9215\u5927\u5c0f\u5c31\u597d\uff0c<br>\u90a3\u6211\u5011\u5148\u770b\u4e00\u4e0bHtml\u539f\u59cb\u78bc\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- HTML --&gt;<\/span>\n\n&lt;body&gt;\n    <span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- \u9019\u662f\u5713\u578b\u6309\u9215\u6e2c\u8a66 --&gt;<\/span>\n    &lt;p&gt;CheckBox&lt;\/p&gt;\n    &lt;div class=\"ckbutton\"&gt;\n        &lt;input type=\"checkbox\" class=\"ckbutton_checkbox\" id=\"ckbutton_id\" checked&gt;\n        &lt;label class=\"ckbutton_label\" for=\"ckbutton_id\"&gt;&lt;\/label&gt;\n\n        &lt;input type=\"checkbox\" class=\"ckbutton_checkbox\" id=\"ckbutton_id2\"&gt;\n        &lt;label class=\"ckbutton_label\" for=\"ckbutton_id2\"&gt;&lt;\/label&gt;\n\n    &lt;\/div&gt;\n    &lt;br \/&gt;\n    &lt;p&gt;RadioButton&lt;\/p&gt;\n    <span style=\"color:#929292\" class=\"has-inline-color\">&lt;!-- radio\u6e2c\u8a66 --&gt;\n    &lt;!-- id\u9023\u7d50\u8a72input name\u76f8\u540c\u8868\u793a\u540c\u4e00\u7fa4\u7d44 value\u70ba\u6309\u9215\u7684\u503c --&gt;<\/span>\n    &lt;div class=\"rdobutton\"&gt;\n        &lt;input class=\"rdobutton_radio\" type=\"radio\" id=\"radioId\" name=\"radioname\" value=\"0\" checked \/&gt;\n        &lt;label class=\"rdobutton_label\" for=\"radioId\"&gt;&lt;\/label&gt;\n\n        &lt;input class=\"rdobutton_radio\" type=\"radio\" id=\"radioId2\" name=\"radioname\" value=\"1\" \/&gt;\n        &lt;label class=\"rdobutton_label\" for=\"radioId2\"&gt;&lt;\/label&gt;\n    &lt;\/div&gt;\n\n\n&lt;\/body&gt;<\/code><\/pre>\n\n\n\n<p>\u4ee5\u4e0a\u662fRadio button\u548cCheckbox\u5728HTML\u90e8\u5206\u7684\u8a2d\u5b9a\uff0c\u63a5\u4e0b\u4f86\u6211\u5011\u4f86<strong>\u6e96\u5099\u52a0\u5165CSS\u6a23\u5f0f\u8a2d\u5b9a<\/strong>\u5427\uff01<\/p>\n\n\n\n<h2 class=\"has-text-align-left has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E5%96%AE%E7%B4%94%E6%94%BE%E5%A4%A7%E6%8C%89%E9%88%95%E5%AF%AC%E9%AB%98\"><\/span>\u55ae\u7d14\u653e\u5927\u6309\u9215\u5bec\u9ad8<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u60f3\u8981\u55ae\u7d14\u653e\u5927\u7684\u8a71\uff0c\u53ea\u9700\u8981\u5728CSS\u4e2d\u5169\u500b\u6309\u9215\u7684class\u7d66\u4e0a\u5bec\u9ad8\u5373\u53ef\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">\/* CSS *\/<\/span>\n\n.ckbutton_checkbox, .rdobutton_radio{\n  width: 25px;\n  height: 25px;\n}<\/code><\/pre>\n\n\n\n<p>\u9019\u6642\u5019\u6211\u5011\u5c31\u53ef\u4ee5\u770b\u5230\uff0c\u6309\u9215\u78ba\u5be6\u8b8a\u5927\u9846\u4e86\uff0c\u4e0d\u518d\u662f\u9810\u8a2d\u90a3\u7a2e\u5c0f\u5230\u5f88\u96e3\u6309\u7684\u6309\u9215\u4e86\uff01<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"136\" height=\"240\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/01\/radio_btn_big.png?resize=136%2C240&#038;ssl=1\" alt=\"\u8a2d\u5b9a\u5bec\u9ad8\u5f8c\u653e\u5927\u7248\" class=\"wp-image-108\" title=\"\u8a2d\u5b9a\u5bec\u9ad8\u5f8c\u653e\u5927\u7248\" data-recalc-dims=\"1\"\/><figcaption>\u8a2d\u5b9a\u5bec\u9ad8\u5f8c\u653e\u5927\u7248<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E8%87%AA%E8%A8%82Radio_button%E5%92%8CCheckbox%E6%8C%89%E9%88%95%E6%A8%A3%E5%BC%8F\"><\/span>\u81ea\u8a02Radio button\u548cCheckbox\u6309\u9215\u6a23\u5f0f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u9019\u6642\u5019\u5982\u679c\u9084\u60f3\u8981\u81ea\u8a02\u4e00\u4e0b\u4e0d\u540c\u7684\u6a23\u5f0f\uff0c<strong>\u6211\u5011\u4f7f\u7528\u7684\u662f::before \u548c ::after\u7684\u65b9\u5f0f<\/strong>\u4f86\u653echeckbox\u88e1\u9762\u90a3\u500b\u52fe\u52fe\uff0c::before\u70ba\u52fe\u52fe\u7684\u5de6\u908a\u77ed\u908a\uff1b::after\u70ba\u52fe\u52fe\u7684\u53f3\u908a\u9577\u908a\uff0c<\/p>\n\n\n\n<p>\u70ba\u4e86\u8ddf\u524d\u9762\u6709\u6240\u5340\u5225\uff0c\u6211\u5011\u628a\u6309\u9215\u6539\u7da0\u8272\uff0c\u4e26\u4e14\u5782\u76f4\u6392\u5217\uff0c\u90a3\u5c31\u8a71\u4e0d\u591a\u8aaa\u76f4\u63a5\u4e0a\u7a0b\u5f0f\u78bc\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"color:#929292\" class=\"has-inline-color\">\/* CSS *\/\n\n\/* *********************\n    \u81ea\u88fdcheckbox\u958b\u59cb\n********************* *\/<\/span>\n.ckbutton_label { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u4e3b\u5916\u6846 *\/<\/span>\n    position: relative;\n    display: block;\n    width: 30px;\n    height: 30px;\n    cursor: pointer;\n    border: 2px solid #01790d;\n    border-radius: 5px;\n    -moz-transition: background-color 0.2s ease-in;\n    -webkit-transition: background-color 0.2s ease-in;\n    -o-transition: background-color 0.2s ease-in;\n    transition: background-color 0.2s ease-in;\n}\n\n    .ckbutton_label::before, .ckbutton_label::after { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u4e0a\u9762\u7684\u6253\u52fe *\/<\/span>\n        content: \"\";\n        position: absolute;\n        width: 5px;\n        background-color: white;\n        -moz-transition: opacity 0.2s ease-in;\n        -webkit-transition: opacity 0.2s ease-in;\n        -o-transition: opacity 0.2s ease-in;\n        transition: opacity 0.2s ease-in;\n        opacity: 0;\n    }\n\n    .ckbutton_label::before { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u6253\u52fe\u5de6\u908a\u7684\u7dda *\/<\/span>\n        height: 11px;\n        top: 13px;\n        left: 7px;\n        -moz-transform: rotate(-45deg);\n        -webkit-transform: rotate(-45deg);\n        -o-transform: rotate(-45deg);\n        -ms-transform: rotate(-45deg);\n        transform: rotate(-45deg);\n    }\n\n    .ckbutton_label::after { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u6253\u52fe\u53f3\u908a\u7684\u7dda *\/<\/span>\n        height: 16px;\n        top: 6px;\n        left: 16px;\n        -moz-transform: rotate(45deg);\n        -webkit-transform: rotate(45deg);\n        -o-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n\n.ckbutton_checkbox:checked + .ckbutton_label { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u7576check\u6642 \u6309\u9215\u984f\u8272\u6539\u8b8a *\/<\/span>\n    background-color: #10bd2a;\n}\n\n    .ckbutton_checkbox:checked + .ckbutton_label::before,\n    .ckbutton_checkbox:checked + .ckbutton_label::after { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u7576check\u6642 \u6253\u52fe\u6d88\u5931 *\/<\/span>\n        opacity: 1;\n    }\n\n.ckbutton_checkbox {\n    display: none;\n}\n\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* *********************\n    \u81ea\u88fdcheckbox\u7d50\u675f\n********************* *\/\n\n\/* *********************\n    \u81ea\u88fdradiobox\u958b\u59cb\n********************* *\/<\/span>\n\n.rdobutton_label { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u4e3b\u5916\u6846 *\/<\/span>\n    position: relative;\n    display: block;\n    width: 30px;\n    height: 30px;\n    cursor: pointer;\n    border: 2px solid #01790d;\n    border-radius: 25px;\n    -moz-transition: background-color 0.2s ease-in;\n    -webkit-transition: background-color 0.2s ease-in;\n    -o-transition: background-color 0.2s ease-in;\n    transition: background-color 0.2s ease-in;\n}\n\n    .rdobutton_label::before {\n        content: \"\";\n        position: absolute;\n        top: 7px;\n        left: 7px;\n        width: 16px;\n        height: 16px;\n        background-color: white;\n        border-radius: 25px;\n        opacity: 0;\n        -moz-transition: opacity 0.2s ease-in;\n        -webkit-transition: opacity 0.2s ease-in;\n        -o-transition: opacity 0.2s ease-in;\n        transition: opacity 0.2s ease-in;\n    }\n\ninput:checked + .rdobutton_label { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u7576check\u6642 \u6309\u9215\u984f\u8272\u6539\u8b8a *\/<\/span>\n    background-color: #10bd2a;\n}\n\n.rdobutton_radio:checked + .rdobutton_label::before { <span style=\"color:#929292\" class=\"has-inline-color\">\/* \u7576check\u6642 \u6253\u52fe\u6d88\u5931 *\/<\/span>\n    opacity: 1;\n}\n\n.rdobutton_radio {\n    display: none;\n}\n\n<span style=\"color:#929292\" class=\"has-inline-color\">\/* *********************\n    \u81ea\u88fdradio\u7d50\u675f\n********************* *\/<\/span>\n<\/code><\/pre>\n\n\n\n<p>\u900f\u904e\u81ea\u8a02\u6a23\u5f0f\uff0c\u6211\u5011\u5c07Radio button\u548cCheckbox\u7684\u5167\u5bb9\u7269\u90fd\u6539\u6210\u6211\u5011\u81ea\u5df1CSS\u7522\u751f\u7684\u5167\u5bb9\uff0c\u9019\u6a23\u4e00\u4f86\uff0c\u81ea\u7531\u5ea6\u5c31\u63d0\u9ad8\u975e\u5e38\u591a\u4e86\uff0c\u60f3\u8981\u505a\u6210\u5404\u7a2e\u4e0d\u540c\u5f62\u72c0\u90fd\u53ef\u4ee5\u4e86\uff01<\/p>\n\n\n\n<p>\u800c\u4e0a\u9762\u7bc4\u4f8b\u5b8c\u6210\u7684\u6a23\u5b50\u6703\u986f\u793a\u6210\u4e0b\u9762\u9019\u6a23\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"134\" height=\"316\" src=/index.html"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/01\/radio_btn_green.png?resize=134%2C316&#038;ssl=1\" alt=\"\u81ea\u8a02\u6a23\u5f0f\" class=\"wp-image-110\" title=\"\u81ea\u8a02\u6a23\u5f0f\" srcset=\"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/01\/radio_btn_green.png?w=134&amp;ssl=1 134w, https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/01\/radio_btn_green.png?resize=127%2C300&amp;ssl=1 127w\" sizes=\"(max-width: 134px) 100vw, 134px\" data-recalc-dims=\"1\" \/><figcaption>\u81ea\u8a02\u6a23\u5f0f<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"has-palette-color-4-color has-text-color has-background wp-block-heading\" style=\"background-color:#ffe1da\"><span class=\"ez-toc-section\" id=\"%E7%B5%90%E8%AB%96\"><\/span>\u7d50\u8ad6<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u9019\u500b\u5c0f\u6280\u5de7\u662f\u6211\u5728\u9032\u8077\u5834\u6642\u63a5\u89f8\u7684\u7b2c\u4e00\u4ef6\u4e8b\u60c5\uff0c\u5c31\u662f\u8acb\u6211<strong>\u60f3\u8fa6\u6cd5\u628a\u6309\u9215\u8b8a\u5927\u9846<\/strong>\uff0c\u597d\u8b93\u516c\u53f8\u7522\u54c1\u7cfb\u7d71\u53ef\u4ee5\u597d\u6309\u4e00\u9ede\uff0c\u53ea\u662f\u5728\u6309\u9215\u653e\u5927\u5f8c\uff0c\u5c31\u6703\u958b\u59cb\u8acb\u6211<strong>\u628a\u6309\u9215\u8b8a\u6210\u4e0d\u540c\u984f\u8272\u3001\u4e0d\u540c\u6a23\u5f0f<\/strong>\uff0c\u9019\u6642\u5019\u5c31\u9700\u8981\u81ea\u8a02CSS\u4f86\u8b93\u6309\u9215\u7522\u751f\u4e0d\u540c\u7684\u6548\u679c\u3002<\/p>\n\n\n\n<p><strong>\u6703\u9078\u64c7\u900f\u904e ::before \u548c ::after \u7684\u65b9\u5f0f\u4f86\u8b93\u6211\u6709\u5f88\u9ad8\u7684\u81ea\u7531\u5ea6\u53ef\u4ee5\u4fee\u6539\u6210\u60f3\u8981\u7684\u6a21\u6a23\uff0c\u539f\u56e0\u662f\u53ef\u4ee5\u4e0d\u7528\u589e\u52a0HTML\u6a19\u7c64\u5c31\u80fd\u5b8c\u6210Checkbox\u90a3\u7a2e\u52fe\u52fe<\/strong>\uff0c\u5728\u5be6\u52d9\u4e0a\u4e5f\u662f\u6bd4\u8f03\u5e38\u898b\u7684\u4f5c\u6cd5\uff0c\u56e0\u70ba\u6709\u6642\u5019\u914d\u5408\u7684\u5f8c\u7aef\u5de5\u7a0b\u5e2b\u53ef\u80fd\u662fPHP\u6216C#\u6216ASP.NET\u4f60\u4e0d\u77e5\u9053\uff0c\u4f46\u5982\u679c\u80fd\u55ae\u9760CSS\u6a23\u5f0f\u6a94\u5c31\u628a\u5167\u5bb9\u6539\u6210\u5c0d\u65b9\u60f3\u8981\u7684\u6a23\u5b50\uff0c\u9664\u4e86\u4e0d\u7528\u8acb\u5c0d\u65b9\u52a0\u6771\u52a0\u897f\u4ee5\u5916\uff0c\u4ed6\u5011\u5c0d\u4f60\u7684\u80fd\u529b\u4e5f\u6703\u66f4\u6709\u4fe1\u5fc3\u5662\uff01<\/p>\n\n\n\n<script async=\"\" src=/index.html"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- square ads -->\n<ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-5595715547350173\" data-ad-slot=\"7241372607\" data-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Radio button\u548cCheckbox\u6309\u9215\u900f\u904eCSS\u7684\u65b9\u5f0f\u4fee\u6539\uff0c\u9019\u88e1\u5c31\u7528\u7a0b\u5f0f\u78bc\u76f4\u63a5\u8b93\u4f60\u5b78\u6703\uff0c\u4e0d\u53ea\u8b93\u4f60\u80fd\u5c07\u6309\u9215\u8b8a\u5927\u9846\uff0c\u4e5f\u80fd\u6559\u4f60\u628a\u6309\u9215\u900f\u904eCSS\u81ea\u8a02\u6210\u60f3\u8981\u7684\u6a23\u5f0f\u5662\uff01\u5982\u679c\u9084\u60f3\u8981\u81ea\u8a02\u6a23\u5f0f\u64c1\u6709\u66f4\u591a\u5143\u5316\u7684\u5448\u73fe\uff0c\u6211\u5011\u4f7f\u7528\u7684\u662f::before \u548c ::after\u7684\u65b9\u5f0f\u4f86\u5448\u73fe\uff0c\u8b93HTML\u66f4\u7c21\u6f54\uff01<\/p>\n","protected":false},"author":1,"featured_media":114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,7],"tags":[20,18,30],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/\/wp-content\/uploads\/2021\/01\/tag-433302_1920.jpg?fit=1920%2C1285&ssl=1","_links":{"self":[{"href":"https:\/\/\/wp-json\/wp\/v2\/posts\/102"}],"collection":[{"href":"https:\/\/\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":7,"href":"https:\/\/\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":2238,"href":"https:\/\/\/wp-json\/wp\/v2\/posts\/102\/revisions\/2238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/media\/114"}],"wp:attachment":[{"href":"https:\/\/\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}