{"id":9232,"date":"2011-05-02T11:08:04","date_gmt":"2011-05-02T18:08:04","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=9232"},"modified":"2011-05-02T11:08:04","modified_gmt":"2011-05-02T18:08:04","slug":"custom-radio-buttons","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/custom-radio-buttons\/","title":{"rendered":"Custom Radio Buttons"},"content":{"rendered":"<pre rel=\"CSS\"><code>#foo:checked::before,\r\ninput[type=\"checkbox\"] {\r\n    position:absolute;\r\n    clip: rect(0,0,0,0);\r\n    clip: rect(0 0 0 0);\r\n}\r\n\r\n#foo:checked,\r\ninput[type=\"checkbox\"] + label::before {\r\n    content: url('checkbox.png');\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + label::before {\r\n    content: url('checkbox-checked.png');\r\n}<\/code><\/pre>\n<p>#foo doesn&#8217;t reference any particular element, it&#8217;s there purely to prevent browsers from implementing the later selectors if it doesn&#8217;t understand that (since most browsers will drop the entire selector if any part of it fails). <\/p>\n","protected":false},"excerpt":{"rendered":"<p>#foo:checked::before, input[type=&#8221;checkbox&#8221;] { position:absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0); } #foo:checked, input[type=&#8221;checkbox&#8221;] + label::before { content: url(&#8216;checkbox.png&#8217;); } input[type=&#8221;checkbox&#8221;]:checked + label::before { content: url(&#8216;checkbox-checked.png&#8217;); } #foo doesn&#8217;t reference any particular element, it&#8217;s there purely to prevent browsers from implementing the later selectors if it doesn&#8217;t understand that (since most browsers will drop the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":15146,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-checkboxes-and-radio-buttons\/","url_meta":{"origin":9232,"position":0},"title":"Custom Checkboxes and Radio Buttons","date":"November 23, 2011","format":false,"excerpt":"The selectors here are specific to Wufoo markup, but the concepts at work can work for any form. The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with graphics. Then use the :checked selector to alternate\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14166,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","url_meta":{"origin":9232,"position":1},"title":":checked","date":"February 17, 2013","format":false,"excerpt":"The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input () elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not\u2026","rel":"","context":"With 45 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14174,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/default\/","url_meta":{"origin":9232,"position":2},"title":":default","date":"September 6, 2011","format":false,"excerpt":"The :default pseudo selector will match the default in a group of associated elements, such as the radio button in a group of buttons that is selected by default, even if the user has selected a different value. input[type=\"radio\"]:default + label:after { content: ' (default)'; color: #999; font-style: italic; }\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14180,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\/","url_meta":{"origin":9232,"position":3},"title":":enabled","date":"April 18, 2013","format":false,"excerpt":"The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements include ones in that you can select, that you can enter data into, or that you can focus on or click. So when\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13911,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/appearance\/","url_meta":{"origin":9232,"position":4},"title":"appearance","date":"August 31, 2011","format":false,"excerpt":"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme. .thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } This is starting to be unprefixed, which is great because the cross-browser story here is very complicated. The appearance property is\u2026","rel":"","context":"In \"appearance\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4771,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/check-if-checkbox-is-checked\/","url_meta":{"origin":9232,"position":5},"title":"Check if Checkbox is Checked","date":"November 20, 2009","format":false,"excerpt":"Say that 10 times fast =). Find out if a single checkbox is checked or not, returns true or false: $('#checkBox').attr('checked'); Find all checked checkboxes: $('input[type=checkbox]:checked');","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9232"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=9232"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9232\/revisions"}],"predecessor-version":[{"id":9233,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/9232\/revisions\/9233"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=9232"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=9232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}