How to make the radio button background and border color different Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to make the radio button background and border color different without wasting too much if your time.

The question is published on by Tutorial Guruji team.

.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/bootstrap@4.6.1/dist/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
      <!-- Popper JS -->
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/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.

Answer

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>
We are here to answer your question about How to make the radio button background and border color different - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji