How to make the radio button background and border color different
.radio-f{
border: 1px solid #ccc !important;
border-radius: 50px !important;
padding-top: 10px !important;
background-color: #EDEDED !important;
color: #808080;
display: flex !important;
justify-content: space-around !important;
align-items: baseline !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<head>
<!-- Google Font -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome library -->
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../Assets/css/index.css">
<link rel="stylesheet" href="../Assets/css/inst-home.css">
<link rel="stylesheet" href="../Assets/css/tutor-register-one.css">
<title>Pakistan Tutor - Student Register</title>
</head>
</head>
<body>
<div class="col-lg-12">
<div class="row mb-5">
<div class="col-lg-6 mt-3">
<div class="radio-f">
<label class="entry" for="input1"><div class="circle"></div><div class="entry-label">Online</div>
</label>
<input type="radio" class="hidden" id="input1" name="inputs">
</div>
</div>
<div class="col-lg-6 mt-3">
<div class="radio-f">
<label class="entry" for="input2">
<div class="circle"></div>
<div class="entry-label">Offline</div>
</label>
<input type="radio" class="hidden" id="input2" name="inputs">
</div>
</div>
<div class="highlight"></div>
<div class="overlay"></div>
</div>
</div>
</body>
</html>
> I want the radio button color and background same as shown in the image.
I tried very much but nothig is happen.
> I want the radio button color and background same as shown in the image.
I tried very much but nothig is happen.
> I want the radio button color and background same as shown in the image.
I tried very much but nothig is happen.
Try this
input[type="radio"]::after {
width: 100%;
height: 100%;
border-radius: 15px;
top: 0;
left: 0;
background-color: #6b6b6b;
content: "";
display: inline-block;
}
input[type="radio"]:checked::after {
all: initial;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="radio" checked />
<input type="radio" />
</body>
</html>