Commit257e6b5

committed

Added Project #23 - Custom Radio

1 parent7dcdde4 commit257e6b5Copy full SHA for 257e6b5

File tree

+60

-0

lines changed

+60

-0

lines changed

Lines changed: 22 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,22 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<htmllang="en">`
	`3`	`+<head>`
	`4`	`+<metacharset="UTF-8"/>`
	`5`	`+<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>`
	`6`	`+<metaname="viewport"content="width=device-width, initial-scale=1.0"/>`
	`7`	`+<linkrel="stylesheet"href="style.css"/>`
	`8`	`+<title>Custom Radio Button</title>`
	`9`	`+</head>`
	`10`	`+<body>`
	`11`	`+<div>`
	`12`	`+<labelfor="radio1">`
	`13`	`+<inputtype="radio"name="radio"id="radio1"checked/>`
	`14`	`+<spanclass="ball"></span>`
	`15`	`+</label>`
	`16`	`+<labelfor="radio2">`
	`17`	`+<inputtype="radio"name="radio"id="radio2"/>`
	`18`	`+<spanclass="ball"></span>`
	`19`	`+</label>`
	`20`	`+</div>`
	`21`	`+</body>`
	`22`	`+</html>`

Lines changed: 38 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,38 @@`
	`1`	`+body {`
	`2`	`+display: grid;`
	`3`	`+place-items: center;`
	`4`	`+min-height:100vh;`
	`5`	`+}`
	`6`	`+`
	`7`	`+div {`
	`8`	`+display: flex;`
	`9`	`+}`
	`10`	`+`
	`11`	`+label {`
	`12`	`+display: flex;`
	`13`	`+justify-content: center;`
	`14`	`+align-items: center;`
	`15`	`+`
	`16`	`+width:30px;`
	`17`	`+height:30px;`
	`18`	`+border:2px solid blueviolet;`
	`19`	`+border-radius:50%;`
	`20`	`+margin-right:1rem;`
	`21`	`+}`
	`22`	`+`
	`23`	`+labelinput {`
	`24`	`+display: none;`
	`25`	`+}`
	`26`	`+`
	`27`	`+labelspan.ball {`
	`28`	`+display: inline-block;`
	`29`	`+width:calc(100%-8px);`
	`30`	`+height:calc(100%-8px);`
	`31`	`+background-color: blueviolet;`
	`32`	`+border-radius:50%;`
	`33`	`+opacity:0;`
	`34`	`+}`
	`35`	`+`
	`36`	`+labelinput:checked+span.ball {`
	`37`	`+opacity:1;`
	`38`	`+}`

Comments

(0)