Breaking News: Grepper is joining You.com. Read the official announcement!

custom radio css

Sandy4467 answered on December 27, 2021 Popularity 10/10 Helpfulness 2/10

answer custom radio css

related custom radio button

custom radio css

Comment

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<style>
/* 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 checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

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

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: css html radio

Link to this answer
Share Copy Link

Contributed on Dec 27 2021

Sandy4467

0 Answers Avg Quality 2/10

Closely Related Answers

custom radio button

Comment

.custom-radio {
  display: inline;
  position: relative;
  padding-left: 30px; /* Adjust the spacing between the radio button and label as needed */
  cursor: pointer;
}

.custom-radio input {
  display: none; /* Hide the default radio input */
}

.radio-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px; /* Adjust the size of the radio button circle as needed */
  height: 20px;
  background-color: white;
  border: 2px solid black; /* Black border */
  border-radius: 50%; /* Create a circular shape */
}

.custom-radio input:checked + .radio-circle:after {
  content: '';
  position: absolute;
  top: 6px; /* Adjust the position of the dot as needed */
  left: 6px; /* Adjust the position of the dot as needed */
  width: 8px; /* Adjust the size of the dot as needed */
  height: 8px; /* Adjust the size of the dot as needed */
  border-radius: 50%; /* Make the dot circular */
  background: black; /* Color the dot as black */
}

Popularity 9/10 Helpfulness 2/10 Language css

Source: chat.openai.com

Tags: css radio-button radio

Link to this answer
Share Copy Link

Contributed on Oct 21 2023

Hacker Harsha

0 Answers Avg Quality 2/10

custom radio button

Comment

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Custom Radio Buttons</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta https-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
</head>
<body>
  <div class="wrapper">
    <input type="radio" name="select" id="one" checked>
    <input type="radio" name="select" id="two">

    <label for="one" class="option option-1">
      <span>One</span>
    </label>
    <label for="two" class="option option-2">
      <span>Two</span>
    </label>
  </div>
  
<style>
	* {
  padding: 0;
  margin: 0;
  outline: 0;
  color: #444;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}
html, body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #180f2f;
}
.wrapper {
  display: inline-flex;
  background: #fff;
  height: 100px;
  width: 250px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  box-shadow: 5px 5px 30px rgb(0 0 0 / 20%);
}
.wrapper .option {
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
  border-radius: 5px;
  padding: 0 10px;
  border: 2px solid #180f2f;
  transition: all 0.5s ease;
  margin: 0 10px;
}
input[type="radio"] {
  display: none;
}
input#one:checked ~ .option-1,
input#two:checked ~ .option-2 {
  background: #180f2f;
  border-color: #180f2f;
}

input#one:checked ~ .option-1 span,
input#two:checked ~ .option-2 span {
  color: #fff;
}
.wrapper .option span {
  font-size: 20px;
}
</style>
</body>
</html>

Popularity 10/10 Helpfulness 2/10 Language html

Source: blog.stackfindover.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Jan 26 2022

Splendid Sable

0 Answers Avg Quality 2/10

custom radio css

Contents

More Related Answers

custom radio css

Closely Related Answers

custom radio button

custom radio button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.