CSS for HTML radio button

acr Source

I am using custom CSS styles for the radio button. I am trying to place two buttons adjacent to a text box but the problem I am facing here is, one radio button is staying top of other instead of adjacent:

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  background-color: #C5C5C5;
  border-radius: 4px;
  padding: 5px;
  width: 25px;
  height: 20px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #c5c5c5;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: deeppink;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

.inputQ {
  width: 50%;
  margin: auto; 
  padding: 0px;
  height: 0px;
  margin-top: 50px;
}

.InputQuest {
  width: 50%;
  float: left;
  font-family: arial;
  font-size: 18px;
  text-align: center;
  line-height: 30px;
  margin: auto;
}

.textbox {
  float: left;
  margin: auto;
  font-size: 16px;
  font-family: verdana;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 30%;
}
<div class="inputQ">
  <div class="InputQuest">Enter Value</div>
  <div><input id="inttext" class="textbox"></div>
  <label class="container">
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark">Yr</span>
  </label>
  <label class="container">
    <input type="radio" name="radio">
    <span class="checkmark">Mo</span>
  </label>
</div>

Also, when I try to adjust the width of the container, Its changing only for one radio button.Can you help me with this

Fiddle : https://jsfiddle.net/anoopcr/dpo6s6qf/

htmlcsscss3

Answers

answered 3 months ago Levi Arista #1

The problem is that you have declared that the style position:absolute is for your both checkmarks putting them on top of each other, you just have to change these parts in your css:

.container {
   display: inline; /* change display: block to display: inline */
   position: relative;
   cursor: pointer;
   font-size: 16px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.checkmark {
   /* position: absolute; delete this */
   background-color: #C5C5C5;
   border-radius: 4px;
   padding:5px;
   width:25px;
   height:20px;
}

Then just fix paddings and margins. Hope it helps you.

answered 3 months ago faizanikram #2

Copy this code it will work perfectly as you wanted...

.container {
      display: block;
      position: relative;
      cursor: pointer;
      font-size: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    /* Hide the browser's default radio button */
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    /* Create a custom radio button */
    .checkmark {
      position: absolute;
      background-color: #C5C5C5;
      border-radius: 4px;
      padding: 5px;
      width: 25px;
      height: 20px;
    }

    /* On mouse-over, add a grey background color */
    .container:hover input ~ .checkmark {
    position:relative;
    float:left;
      background-color: #c5c5c5;
    }

    /* When the radio button is checked, add a blue background */
    .container input:checked ~ .checkmark {
    position:relative;
    float:left;
      background-color: deeppink;
    }

    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }

    /* Show the indicator (dot/circle) when checked */
    .container input:checked ~ .checkmark:after {
      display: block;
    }

    .inputQ {
      width: 50%;
      margin: auto; 
      padding: 0px;
      height: 0px;
      margin-top: 50px;
    }

    .InputQuest {
      width: 50%;
      float: left;
      font-family: arial;
      font-size: 18px;
      text-align: center;
      line-height: 30px;
      margin: auto;
    }

    .textbox {
      float: left;
      margin: auto;
      font-size: 16px;
      font-family: verdana;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      width: 30%;
    }
<!-- begin snippet: js hide: false console: true babel: false -->

comments powered by Disqus