css change radio button style
.radiobutton{
background-color: cyan;
border: none;
padding: 2px;
}
.radiobutton:hover{
background-color: blue;
border: none;
padding: 10px;
}css change radio button style
.radiobutton{
background-color: cyan;
border: none;
padding: 2px;
}
.radiobutton:hover{
background-color: blue;
border: none;
padding: 10px;
}custom radio css
<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>custom radio button
<!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>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
