How to make the radio button background and border color different

Question

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

Please fix the format of your question. There's text in the snippet that doesn't belong there. That text would unnecessarily be formatted as a quote. Also why is there three times the same text? And why is the snippet (the HTML section should only contain the content of the `` element) wrapped in an "image" that is wrapped in an image? — Andreas, Jan 22 '22 at 17:24
[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask): _"Introduce the problem before you post any code: In the body of your question, start by expanding on the summary you put in the title. Explain how you encountered the problem you're trying to solve, and any difficulties that have prevented you from solving it yourself. The first paragraph in your question is the second thing most readers will see, so make it as engaging and informative as possible."_ — Andreas, Jan 22 '22 at 17:26
I have nothing to say but it continues asking me to write more. I want the style same as shown in the image. — shawaiz minhas, Jan 22 '22 at 17:27

score 2 · Accepted Answer · answered Jan 22 '22 at 17:38

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>

_"Try this"_ is not an answer. What's the problem with OPs version (although OP never mentioned any problems...)? And how does your answer solve that unmentioned problem? — Andreas, Jan 22 '22 at 17:41

How to make the radio button background and border color different

1 Answers1