{"id":12554,"date":"2023-09-08T09:04:05","date_gmt":"2023-09-08T01:04:05","guid":{"rendered":"https:\/\/blog.hoyo.idv.tw\/?p=12554"},"modified":"2023-09-11T15:37:25","modified_gmt":"2023-09-11T07:37:25","slug":"css-%e8%87%aa%e5%ae%9a%e7%be%a9-radio-checkbox-%e7%82%ba%e6%96%b9%e5%a1%8a","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=12554","title":{"rendered":"CSS - \u81ea\u5b9a\u7fa9 Radio, Checkbox \u70ba\u65b9\u584a"},"content":{"rendered":"<p>--<\/p>\n<ul>\n<li><a href=\"https:\/\/abgne.tw\/css\/apply-css3\/css3-custom-radio-and-checkbox-button-style.html\" target=\"_blank\" rel=\"noopener\">[CSS3]\u7528 CSS3 \u505a\u8868\u55ae - \u81ea\u8a02\u55ae\/\u591a\u9078\u6846\u6a23\u5f0f(\u4e00) | \u7537\u4e01\u683c\u723e's \u812b\u6bbc\u73a9 (abgne.tw)<\/a><\/li>\n<\/ul>\n<p>HTML<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"custom-radio\"&gt;\r\n    &lt;input type=\"radio\" id=\"male\" name=\"sex\"&gt;\r\n    &lt;label for=\"male\"&gt;\u7537\u6027&lt;\/label&gt;\r\n\r\n    &lt;input type=\"radio\" id=\"female\" name=\"sex\"&gt;\r\n    &lt;label for=\"female\"&gt;\u5973\u6027&lt;\/label&gt;\r\n\r\n    &lt;input type=\"radio\" id=\"other\" name=\"sex\"&gt;\r\n    &lt;label for=\"other\"&gt;\u5176\u5b83&lt;\/label&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>CSS<\/p>\n<pre class=\"lang:css decode:true \">.custom-radio input[type=\"radio\"] {\r\n    display: none;\r\n}\r\n.custom-radio input[type=\"radio\"] + label {\r\n    display: inline-block;\r\n    background-color: #ccc;\r\n    cursor: pointer;\r\n    padding: 5px 10px;\r\n}\r\n.custom-radio input[type=\"radio\"]:checked + label {\r\n    background-color: #f00;\r\n    color: #fff;\r\n}<\/pre>\n<p>\u6210\u679c<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-12557\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2023\/09\/2023-09-07-14-00-09.png\" alt=\"\" width=\"187\" height=\"49\" \/><\/p>\n<p>--<\/p>\n<ul>\n<li><a class=\"question-hyperlink\" href=\"https:\/\/stackoverflow.com\/questions\/50547730\/custom-css-to-radio-button-labels\" target=\"_blank\" rel=\"noopener\">Custom CSS to radio button labels<\/a><\/li>\n<\/ul>\n<p>HTML<\/p>\n<pre class=\"lang:default decode:true\">&lt;div class=\"custom_radio\"&gt;\r\n    &lt;input type=\"radio\" id=\"x1\" name=\"x\"\/&gt;\r\n    &lt;label for=\"x1\"&gt;Choice 1&lt;\/label&gt;\r\n\r\n    &lt;input type=\"radio\" id=\"x2\" name=\"x\" checked\/&gt;\r\n    &lt;label for=\"x2\"&gt;Choice 2&lt;\/label&gt;\r\n\r\n    &lt;input type=\"radio\" id=\"x3\" name=\"x\"\/&gt;\r\n    &lt;label for=\"x3\"&gt;Choice 3&lt;\/label&gt;\r\n\r\n    &lt;input type=\"radio\" id=\"x4\" name=\"x\"\/&gt;\r\n    &lt;label for=\"x4\"&gt;Choice 4&lt;\/label&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div class=\"custom_checkbox\"&gt;\r\n    &lt;input type=\"checkbox\" id=\"x1_checkbox\" name=\"x\"\/&gt;\r\n    &lt;label for=\"x1_checkbox\"&gt;Choice 1&lt;\/label&gt;\r\n\r\n    &lt;input type=\"checkbox\" id=\"x2_checkbox\" name=\"x\" checked\/&gt;\r\n    &lt;label for=\"x2_checkbox\"&gt;Choice 2&lt;\/label&gt;\r\n\r\n    &lt;input type=\"checkbox\" id=\"x3_checkbox\" name=\"x\"\/&gt;\r\n    &lt;label for=\"x3_checkbox\"&gt;Choice 3&lt;\/label&gt;\r\n\r\n    &lt;input type=\"checkbox\" id=\"x4_checkbox\" name=\"x\"\/&gt;\r\n    &lt;label for=\"x4_checkbox\"&gt;Choice 4&lt;\/label&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>CSS<\/p>\n<pre class=\"lang:css decode:true\">.custom_radio, .custom_checkbox {\r\n    width: fit-content;\r\n    border: 1px solid #666;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: row;\r\n    \/*flex-wrap: no-wrap;*\/\r\n}\r\n\r\n.custom_radio input, .custom_checkbox input {\r\n    display: none;\r\n}\r\n\r\n.custom_radio label, .custom_checkbox label {\r\n    padding: 10px 16px;\r\n    border-right: 1px solid #ccc;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n}\r\n\r\n.custom_radio label:last-of-type, .custom_checkbox label:last-of-type {\r\n    border-right: 0;\r\n}\r\n\r\n.custom_radio label:hover, .custom_checkbox label:hover {\r\n    background: #eee;\r\n}\r\n\r\n.custom_radio input:checked + label{\r\n    background: #becbff;\r\n}\r\n.custom_checkbox input:checked + label {\r\n    background: #c6e3dc;\r\n}<\/pre>\n<p>\u6210\u679c<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-12594\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2023\/09\/2023-09-11-15-36-43.png\" alt=\"\" width=\"893\" height=\"70\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2023\/09\/2023-09-11-15-36-43.png 893w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2023\/09\/2023-09-11-15-36-43-300x24.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2023\/09\/2023-09-11-15-36-43-768x60.png 768w\" sizes=\"(max-width: 893px) 100vw, 893px\" \/><\/p>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"12554\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,398&nbsp;total views, &nbsp;3&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>-- [CSS3]\u7528 CSS3...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"12554\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,398&nbsp;total views, &nbsp;3&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262],"tags":[68,350],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/12554"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12554"}],"version-history":[{"count":4,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/12554\/revisions"}],"predecessor-version":[{"id":12595,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/12554\/revisions\/12595"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}