{"id":1513,"date":"2018-06-07T13:48:19","date_gmt":"2018-06-07T13:48:19","guid":{"rendered":"https:\/\/www.templatemonster.com\/hu\/blog\/?p=1513"},"modified":"2018-06-07T13:48:19","modified_gmt":"2018-06-07T13:48:19","slug":"hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/","title":{"rendered":"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal"},"content":{"rendered":"

Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az oper\u00e1ci\u00f3s rendszert\u0151l \u00e9s a b\u00f6ng\u00e9sz\u0151t\u0151l f\u00fcgg\u0151en elt\u00e9r\u0151 m\u00f3don n\u00e9znek ki, \u00e9s a CSS haszn\u00e1lat\u00e1val sem tudjuk \u0151ket megv\u00e1ltoztatni.<\/p>\n

Ez bosszant\u00f3 lehet a legt\u00f6bb tervez\u0151 sz\u00e1m\u00e1ra, akik szeretn\u00e9k ezeket az elemeket sz\u00e9pp\u00e9 tenni, hogy ne ronts\u00e1k el a diz\u00e1jnt. Ebben a bemutat\u00f3ban megmutatom neked, hogyan lehet \u0151ket vonz\u00f3v\u00e1 tenni egy egyszer\u0171 tr\u00fckkel. L\u00e1ssunk hozz\u00e1!<\/p>\n

L\u00e9gy er\u0151s. Rejtsd el jel\u00f6l\u0151n\u00e9gyzeteidet!<\/h3>\n

Ez ellentmond\u00e1sosnak t\u0171nhet, de ahhoz, hogy a jel\u00f6l\u0151n\u00e9gyzetek \u00e9s a v\u00e1laszt\u00f3gombok j\u00f3l n\u00e9zzenek ki, el kell azokat rejteni \u00e9s elfelejteni! Ehhez egy egyszer\u0171 szab\u00e1lyt alkalmazunk:<\/p>\n

.section input[type=\"radio\"], .section input[type=\"checkbox\"]{ display<\/span>: none<\/span>; }<\/p>\n

De, Matthew, mondhatn\u00e1d. M\u00e9gis mihez fogunk kezdeni n\u00e9lk\u00fcl\u00fck? Nyugi, nem kell agg\u00f3dnod.
\nMeg\u00e9p\u00edtj\u00fck a saj\u00e1t jel\u00f6l\u0151n\u00e9gyzeteinket. L\u00e1ssunk is hozz\u00e1.<\/p>\n

V\u00e1laszt\u00f3gombok<\/h3>\n

El\u0151sz\u00f6r is, itt a mark-up:<\/p>\n

<section<\/strong> id=<\/span>\"first\"<\/span> class=<\/span>\"section\"<\/span>> \r\n    <div<\/strong> class=<\/span>\"container\"<\/span>> \r\n     <input<\/strong> type=<\/span>\"radio\"<\/span> name=<\/span>\"group1\"<\/span> id=<\/span>\"radio-1\"<\/span>> \r\n     <label<\/strong> for=<\/span>\"radio-1\"<\/span>><span<\/strong> class=<\/span>\"radio\"<\/span>><\/span>Coffee<\/span><\/span<\/strong>><\/label<\/strong>><\/span> \r\n    <\/div<\/strong>><\/span> \r\n    <div class=<\/span>\"container\"<\/span>><\/span> \r\n      <input type=<\/span>\"radio\"<\/span> name=<\/span>\"group1\"<\/span> id=<\/span>\"radio-2\"<\/span>><\/span> \r\n      <label for=<\/span>\"radio-2\"<\/span>><span class=<\/span>\"radio\"<\/span>><\/span>Tea<\/span><<\/span>\/span><\/label> \r\n    <\/div<\/strong>><\/span> \r\n    <div<\/strong> class=<\/span>\"container\"<\/span>><\/span> \r\n      <input<\/strong> type=<\/span>\"radio\"<\/span> name=<\/span>\"group1\"<\/span> id=<\/span>\"radio-3\"<\/span>> \r\n      <label<\/strong> for=<\/span>\"radio-3\"<\/span>><span<\/strong> class=<\/span>\"radio\"<\/span>><\/span>Cappuccino<\/span><\/span<\/strong>><\/label<\/strong>><\/span> \r\n    <\/div<\/strong>> <\/section<\/strong>><\/span><\/pre>\n
Van egy r\u00e9sz\u00fcnk, ahol h\u00e1rom v\u00e1laszt\u00f3gombot fogunk mag\u00e1ba foglalni. A bemutat\u00f3ban tov\u00e1bbi jel\u00f6l\u0151n\u00e9gyzeteket mutatunk, az elv ugyanaz. Minden bevitelt egy kont\u00e9neroszt\u00e1lyba tartoz\u00f3 div-ba csomagolj\u00e1k. Mindegyik bemenetnek van egy c\u00edmk\u00e9je is, amelyben van egy span.<\/span><\/p>\n
Fontos!<\/h3>\n
Mivel a v\u00e1laszt\u00f3gombokat ::el\u0151tte \u00e9s ::ut\u00e1na pszeudo elemekkel k\u00edv\u00e1njuk elk\u00e9sz\u00edteni, anyaelemre van sz\u00fcks\u00e9g\u00fcnk, amely alapj\u00e1n elhelyezhet\u0151. Ebben az esetben ez lesz a mi c\u00edmk\u00e9nk:<\/p>\n
.container label<\/strong> {\r\n  position<\/span>: relative<\/span>;\r\n}    \r\n\r\nItt van egy sor st\u00edlus, amely meg van osztva a jel\u00f6l\u0151n\u00e9gyzetek \u00e9s a v\u00e1laszt\u00f3gombok k\u00f6z\u00f6tt. \r\n\r\n<\/pre>\n
.container span<\/strong>::before,\r\n.container span<\/strong>::after {\r\n  content<\/span>: '';\r\n  position<\/span>: absolute<\/span>;\r\n  top<\/span>: 0<\/span>;\r\n  bottom<\/span>: 0;\r\n  margin<\/span>: auto<\/span>;\r\n}<\/pre>\n
A fels\u0151 \u00e9s az als\u00f3 tulajdons\u00e1gok null\u00e1ra \u00e1ll\u00edtva, \u00e9s a marg\u00f3val kombin\u00e1lva: auto; lehet\u0151v\u00e9 teszik, hogy elemeinknek k\u00f6z\u00e9ppontba \u00e1ll\u00edtott v\u00edzszintes helyzet\u00fck legyen.<\/p>\n
\u00cdgy n\u00e9z ki a t\u00f6bbi st\u00edlus:<\/p>\n
.container span<\/strong>.radio:hover {\r\n  cursor<\/span>: pointer<\/span>;\r\n}\r\n.container span<\/strong>.radio::before {\r\n  left<\/span>: -52px<\/span>;\r\n  width<\/span>: 45px<\/span>;\r\n  height<\/span>: 25px<\/span>;\r\n  background-color<\/span>: #A8AAC1<\/span>;\r\n  border-radius<\/span>: 50px<\/span>;\r\n}\r\n.container span<\/strong>.radio::after {\r\n  left<\/span>: -49px<\/span>;\r\n  width<\/span>: 17px<\/span>;\r\n  height<\/span>: 17px<\/span>;\r\n  border-radius<\/span>: 10px<\/span>;\r\n  background-color<\/span>: #6C788A<\/span>;\r\n  transition: left<\/span> .25s<\/span>, background-color .25s<\/span>;\r\n}\r\ninput<\/strong>[type=\"radio\"]:checked + label span<\/strong>.radio::after {\r\n  left<\/span>: -27px<\/span>;\r\n  background-color<\/span>: #EBFF43<\/span>;\r\n}\r\n\r\n<\/pre>\n
A legfontosabb r\u00e9sz az utols\u00f3 szab\u00e1lycsomag, amely l\u00e9nyeg\u00e9ben kiteszi az eg\u00e9sz tr\u00fckk\u00f6t. Az ellen\u0151rz\u00f6tt pszeudo oszt\u00e1ly lehet\u0151v\u00e9 teszi az elemek m\u00f3dos\u00edt\u00e1s\u00e1t, amikor a bevitelt ellen\u0151rzik. A \"+\" szelektor seg\u00edts\u00e9g\u00e9vel kiv\u00e1laszthatjuk a k\u00f6vetkez\u0151 testv\u00e9relemet, \u00e9s megc\u00e9lozhatjuk span.radio-nkat, ahol \u00faj szab\u00e1lyokat alkalmazunk az :: after pseudo elemre. Ebben az esetben v\u00edzszintes helyzet\u00e9t \u00e9s sz\u00edn\u00e9t v\u00e1ltoztatjuk.<\/p>\n
Annak \u00e9rdek\u00e9ben, hogy a kapcsol\u00f3 sima legyen,\u00a0 0,25 m\u00e1sodperces \u00e1tmenetet rendel\u00fcnk hozz\u00e1 a bal oldali tulajdons\u00e1ghoz \u00e9s a h\u00e1tt\u00e9rsz\u00ednhez. Most, amikor r\u00e1kattintunk a v\u00e1laszt\u00f3gombra, a kapcsol\u00f3 sim\u00e1n mozog ahelyett, hogy gyorsan ugorna.<\/p>\n
Jel\u00f6l\u0151n\u00e9gyzetek<\/h3>\n
Ha szeretn\u00e9l l\u00e9trehozni n\u00e9h\u00e1ny jel\u00f6l\u0151n\u00e9gyzetet, a m\u00f3dszer ugyanaz. Tekintsd meg a st\u00edlusokat:<\/p>\n
.container span.checkbox::before {\r\n  width<\/span>: 27px<\/span>;\r\n  height<\/span>: 27px<\/span>;\r\n  background-color<\/span>: #fff<\/span>;\r\n  left<\/span>: -35px<\/span>;\r\n  box-sizing: border-box;\r\n  border<\/span>: 3px<\/span> solid transparent<\/span>;\r\n  transition: border-color .2s;\r\n}\r\n.container span.checkbox:hover::before {\r\n  border<\/span>: 3px<\/span> solid<\/span> #F0FF76<\/span>;\r\n}\r\n.container span.checkbox::after {\r\n  content<\/span>: '\\f00c'<\/span>;\r\n  font-family<\/span>: 'FontAwesome'<\/span>;\r\n  left<\/span>: -31px<\/span>;\r\n  top<\/span>: 2px<\/span>;\r\n  color<\/span>: transparent<\/span>;\r\n  transition: color .2s<\/span>;\r\n}\r\ninput<\/strong>[type=\"checkbox\"]:checked + label span<\/strong>.checkbox::after {\r\n  color<\/span>: #62AFFF<\/span>;\r\n}\r\n\r\n\r\n<\/pre>\n
Az egyetlen k\u00fcl\u00f6nbs\u00e9g az, hogy a FontAwesome csal\u00e1db\u00f3l\u00a0 haszn\u00e1lunk ikont, mint :: after pseudo elem. Alap\u00e9rtelmez\u00e9s szerint \u00e1tl\u00e1tsz\u00f3, de amikor bejel\u00f6li a jel\u00f6l\u0151n\u00e9gyzetet, az ikon k\u00e9kre v\u00e1lt.<\/p>\n
Azonban<\/h3>\n
Ha a pszeudo elemedben FontAwesome ikont szeretn\u00e9l haszn\u00e1lni, be kell vinned a k\u00f3dj\u00e1t a tartalom tulajdons\u00e1gba, \u00e9s meg kell adnod a font-family tulajdons\u00e1got FontAwesome-k\u00e9nt. P\u00e9ld\u00e1ul:<\/p>\n
{\r\ncontent<\/span>: '\\f00c<\/span>';\r\nfont-family<\/span>: 'FontAwesome<\/span>';\r\n}<\/pre>\n
Az f00c k\u00f3dot egy backslash el\u0151zi meg, amely az unicode karakter elker\u00fcl\u00e9s\u00e9hez sz\u00fcks\u00e9ges. Az unicode megtal\u00e1lhat\u00f3 a kiv\u00e1lasztott ikon oldal\u00e1n:<\/p>\n
\"\"<\/p>\n
Eredm\u00e9ny<\/h3>\n
Ez az. Most l\u00e9trehoztunk egy teljesen funkcion\u00e1lis \u00e9s gy\u00f6ny\u00f6r\u0171 jel\u00f6l\u0151n\u00e9gyzetet \u00e9s v\u00e1laszt\u00f3gombokat, amelyeket beilleszthetsz \u00e9s haszn\u00e1lhatsz saj\u00e1t projektjeidhez. A teljes forr\u00e1sk\u00f3d megtekinthet\u0151 a CodePen dem\u00f3ban:<\/p>\n
See the Pen Radio buttons and check boxes 2<\/a> by Matthew Cain (@matthewcain<\/a>) on CodePen<\/a>.<\/p>\n
Ha hasznosnak tal\u00e1ltad ezt az oktat\u00f3anyagot, vagy b\u00e1rmilyen k\u00e9rd\u00e9sed van, oszd meg vel\u00fcnk gondolataidat alul a megjegyz\u00e9sekben. K\u00f6szi!<\/p>\n
A bejegyz\u00e9s angol verzi\u00f3j\u00e1t itt tal\u00e1lod:\u00a0How To Make Stylish Checkboxes And Radio Buttons With CSS3<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az oper\u00e1ci\u00f3s rendszert\u0151l \u00e9s a b\u00f6ng\u00e9sz\u0151t\u0151l f\u00fcgg\u0151en elt\u00e9r\u0151 m\u00f3don n\u00e9znek ki, \u00e9s a CSS haszn\u00e1lat\u00e1val sem tudjuk \u0151ket megv\u00e1ltoztatni. Ez bosszant\u00f3 lehet a legt\u00f6bb tervez\u0151 sz\u00e1m\u00e1ra, akik szeretn\u00e9k ezeket az elemeket sz\u00e9pp\u00e9 tenni, hogy ne ronts\u00e1k el […]<\/p>\n","protected":false},"author":2098140,"featured_media":1514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,7],"tags":[59,31],"yoast_head":"\nHogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal<\/title>\n<meta name=\"description\" content=\"Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\" \/>\n<meta property=\"og:locale\" content=\"hu_HU\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal\" \/>\n<meta property=\"og:description\" content=\"Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog Hungary\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-07T13:48:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/06\/lap.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ingrid Alm\u00e1si\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Szerz\u0151:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ingrid Alm\u00e1si\" \/>\n\t<meta name=\"twitter:label2\" content=\"Becs\u00fclt olvas\u00e1si id\u0151\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 perc\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\"},\"author\":{\"name\":\"Ingrid Alm\u00e1si\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d\"},\"headline\":\"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal\",\"datePublished\":\"2018-06-07T13:48:19+00:00\",\"dateModified\":\"2018-06-07T13:48:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\"},\"wordCount\":714,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#organization\"},\"keywords\":[\"CSS3\",\"HTML5\"],\"articleSection\":[\"Egy\u00e9b\",\"Oktat\u00f3anyagok\"],\"inLanguage\":\"hu\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\",\"url\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\",\"name\":\"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#website\"},\"datePublished\":\"2018-06-07T13:48:19+00:00\",\"dateModified\":\"2018-06-07T13:48:19+00:00\",\"description\":\"Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#breadcrumb\"},\"inLanguage\":\"hu\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/hu\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#website\",\"url\":\"https:\/\/monsterspost.com\/hu\/\",\"name\":\"TemplateMonster Blog Hungary\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/hu\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"hu\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#organization\",\"name\":\"MonsterPost Magyarorsz\u00e1g\",\"url\":\"https:\/\/monsterspost.com\/hu\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hu\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Magyarorsz\u00e1g\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonster\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d\",\"name\":\"Ingrid Alm\u00e1si\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hu\",\"@id\":\"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g\",\"caption\":\"Ingrid Alm\u00e1si\"},\"description\":\"Csod\u00e1latos dolognak tartom az \u00edr\u00e1st, mellyel \u00faj vil\u00e1gokat, k\u00fcl\u00f6nleges embereket teremthet\u00fcnk. Akik\u00e9rt az olvas\u00f3 izgulhat, szeretheti vagy gy\u0171l\u00f6lheti \u0151ket. Vagyis annak a fant\u00e1zi\u00e1j\u00e1t szereti, aki megalkotta a m\u0171vet. Ha csak egy \u00edr\u00e1som elgondolkodtat, elszomor\u00edt vagy megnevettet valakit, m\u00e1r meg\u00e9rte tollat ragadnom.\",\"url\":\"https:\/\/monsterspost.com\/hu\/author\/ingrid\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal","description":"Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/","og_locale":"hu_HU","og_type":"article","og_title":"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal","og_description":"Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az","og_url":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/","og_site_name":"TemplateMonster Blog Hungary","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster\/","article_published_time":"2018-06-07T13:48:19+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2018\/06\/lap.jpg","type":"image\/jpeg"}],"author":"Ingrid Alm\u00e1si","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Szerz\u0151:":"Ingrid Alm\u00e1si","Becs\u00fclt olvas\u00e1si id\u0151":"5 perc"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/"},"author":{"name":"Ingrid Alm\u00e1si","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d"},"headline":"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal","datePublished":"2018-06-07T13:48:19+00:00","dateModified":"2018-06-07T13:48:19+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/"},"wordCount":714,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/hu\/#organization"},"keywords":["CSS3","HTML5"],"articleSection":["Egy\u00e9b","Oktat\u00f3anyagok"],"inLanguage":"hu","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/","url":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/","name":"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal","isPartOf":{"@id":"https:\/\/monsterspost.com\/hu\/#website"},"datePublished":"2018-06-07T13:48:19+00:00","dateModified":"2018-06-07T13:48:19+00:00","description":"Mindannyian ismerj\u00fck a HTML jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat. A legink\u00e1bb frusztr\u00e1l\u00f3 dolog az, hogy nincs m\u00f3d a kin\u00e9zet\u00fck megv\u00e1ltoztat\u00e1s\u00e1ra. Az","breadcrumb":{"@id":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#breadcrumb"},"inLanguage":"hu","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/hu\/hogyan-keszitsunk-stilusos-jelolonegyzeteket-es-valasztogombokat-css3-mal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/hu\/"},{"@type":"ListItem","position":2,"name":"Hogyan k\u00e9sz\u00edts\u00fcnk st\u00edlusos jel\u00f6l\u0151n\u00e9gyzeteket \u00e9s v\u00e1laszt\u00f3gombokat CSS3-mal"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/hu\/#website","url":"https:\/\/monsterspost.com\/hu\/","name":"TemplateMonster Blog Hungary","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/hu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/hu\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"hu"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/hu\/#organization","name":"MonsterPost Magyarorsz\u00e1g","url":"https:\/\/monsterspost.com\/hu\/","logo":{"@type":"ImageObject","inLanguage":"hu","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/hu\/wp-content\/uploads\/sites\/13\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Magyarorsz\u00e1g"},"image":{"@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonster\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/4a5195fab2570a3bfbab891dd43e7b1d","name":"Ingrid Alm\u00e1si","image":{"@type":"ImageObject","inLanguage":"hu","@id":"https:\/\/monsterspost.com\/hu\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b612b53a5e53c42dc5a5442f92d734a9?s=96&d=mm&r=g","caption":"Ingrid Alm\u00e1si"},"description":"Csod\u00e1latos dolognak tartom az \u00edr\u00e1st, mellyel \u00faj vil\u00e1gokat, k\u00fcl\u00f6nleges embereket teremthet\u00fcnk. Akik\u00e9rt az olvas\u00f3 izgulhat, szeretheti vagy gy\u0171l\u00f6lheti \u0151ket. Vagyis annak a fant\u00e1zi\u00e1j\u00e1t szereti, aki megalkotta a m\u0171vet. Ha csak egy \u00edr\u00e1som elgondolkodtat, elszomor\u00edt vagy megnevettet valakit, m\u00e1r meg\u00e9rte tollat ragadnom.","url":"https:\/\/monsterspost.com\/hu\/author\/ingrid\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts\/1513"}],"collection":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/users\/2098140"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":13,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":1529,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/posts\/1513\/revisions\/1529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/media\/1514"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/hu\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}