{"id":802,"date":"2020-04-02T18:14:00","date_gmt":"2020-04-02T16:14:00","guid":{"rendered":"https:\/\/ekiwi.de\/?p=802"},"modified":"2020-04-02T18:17:52","modified_gmt":"2020-04-02T16:17:52","slug":"html-und-css-radio-buttons-groesser-darstellen","status":"publish","type":"post","link":"https:\/\/ekiwi.de\/index.php\/802\/html-und-css-radio-buttons-groesser-darstellen\/","title":{"rendered":"HTML und CSS &#8211; Radio Buttons und Checkboxen gr\u00f6\u00dfer darstellen"},"content":{"rendered":"<p>Wie kann ich Radio-Buttons im Browser gr\u00f6\u00dfer darstellen?<\/p>\n<p><!--more--><\/p>\n<p>Schauen wir uns zuerst die Standarddarstellung an:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/radio_1.png\" alt=\"\" width=\"306\" height=\"187\" class=\"aligncenter size-full wp-image-803\" srcset=\"\/wp-content\/uploads\/2020\/04\/radio_1.png 306w, \/wp-content\/uploads\/2020\/04\/radio_1-300x183.png 300w\" sizes=\"auto, (max-width: 306px) 100vw, 306px\" \/><\/p>\n<p>Die Radio-Buttons werden vom Browser in der normalen Gr\u00f6\u00dfe angezeigt. Um die Gr\u00f6\u00dfe zu \u00e4ndern, kann man nicht einfach die &#8222;width&#8220; oder &#8222;height&#8220; setzen. Dies vergr\u00f6\u00dfert nur die Abst\u00e4nde, \u00e4ndert aber (je nach Browser) nicht die Darstellung.<\/p>\n<p>Der Schl\u00fcssel liegt in der &#8222;transform&#8220;-Funktion:<\/p>\n<pre>\r\ninput[type='radio'] \r\n{ \r\n   transform: scale(2); \r\n}\r\n<\/pre>\n<p>Dies vergr\u00f6\u00dfert uns den Radio-Button auf die doppelte Gr\u00f6\u00dfe:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/radio_2.png\" alt=\"\" width=\"215\" height=\"146\" class=\"aligncenter size-full wp-image-804\" srcset=\"\/wp-content\/uploads\/2020\/04\/radio_2.png 215w, \/wp-content\/uploads\/2020\/04\/radio_2-120x80.png 120w\" sizes=\"auto, (max-width: 215px) 100vw, 215px\" \/><\/p>\n<p>Der RadioButton ist damit schonmal deutlich gr\u00f6\u00dfer, aber die Abst\u00e4nde sind nicht besonders sch\u00f6n. Hier hilft das Setzen eines Abstands:<\/p>\n<pre>\r\ninput[type='radio'] \r\n{ \r\n  transform: scale(2);\r\n  margin: 10px;\r\n}<\/pre>\n<p>Das r\u00fcckt die Sache gerade:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/radio_3.png\" alt=\"\" width=\"227\" height=\"273\" class=\"aligncenter size-full wp-image-805\" \/><\/p>\n<p>Was auff\u00e4llt ist, dass der Button durch die Vergr\u00f6\u00dferung pixeliger wird. Das ist unsch\u00f6n und h\u00e4ngt vom Browser ab. In den Screenshots habe ich Mozilla Firefox verwendet. Google Chrome handhabt die Sache deutlich besser:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/radio_4.png\" alt=\"\" width=\"240\" height=\"258\" class=\"aligncenter size-full wp-image-806\" \/><\/p>\n<p>Mit Checkboxen funktioniert dies nat\u00fcrlich auch:<\/p>\n<pre>\r\ninput[type='checkbox'] \r\n{ \r\n\ttransform: scale(2);\r\n\tmargin: 10px;\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/04\/checkbox.png\" alt=\"\" width=\"288\" height=\"207\" class=\"aligncenter size-full wp-image-808\" srcset=\"\/wp-content\/uploads\/2020\/04\/checkbox.png 288w, \/wp-content\/uploads\/2020\/04\/checkbox-90x65.png 90w\" sizes=\"auto, (max-width: 288px) 100vw, 288px\" \/><\/p>","protected":false},"excerpt":{"rendered":"<p>Wie kann ich Radio-Buttons im Browser gr\u00f6\u00dfer darstellen?<\/p>\n","protected":false},"author":1,"featured_media":61,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[5],"tags":[22,4,149],"class_list":["post-802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hmtl","tag-css","tag-html","tag-radio"],"_links":{"self":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":0,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media\/61"}],"wp:attachment":[{"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ekiwi.de\/index.php\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}