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 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
