Techiio-author
Started by Marrine MorelSep 15, 2021

Open
How to create a Circle input button with ring outside it?

0 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWES SHARE

Here is what I have working right now. Just trying to figure out how to add another small circle inside it to get it to make exactly like the image I included above.

/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 28px;
width: 28px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #0f8c73;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #0f8c73;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 3.5px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>

</body>
</html>

Not sure how to add the ring or shrink the inner circle.

0 Replies

You must be Logged in to reply
Trending Technologies
15
Software40
DevOps46
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance