Displaying text message below radio button once it is checked

Question

I have two radio buttons side by side.After the first radio button is checked I have to display the text below it. I'm using this code but the text comes vertically.I want to display it horizontally.

input[type=radio]:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%
}

input[type=radio]:checked:after {
  content: 'Are u sure you want to select all';
  display: contents;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%;
}

<form>
  <label>
         <input type="radio" name="radio"/>
         Radio1
      </label>
  <label>
         <input type="radio" name="radio"/>
         Radio2
      </label>
</form>

Does this answer your question? [Can I use a :before or :after pseudo-element on an input field?](https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field) — r3mainer, Aug 03 '22 at 08:01

score 0 · Answer 1 · answered Aug 03 '22 at 07:51

0

position:absolute will make it exceed the limitation of it's container (the label). Also why did you limit the elem to width:15px?

input[type=radio]:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%
}

input[type=radio]:checked:after {
  content: 'Are u sure you want to select all';
  background: transparent;
  border: 2px solid #004ecb;
    position: absolute;
}

<form>
  <label>
         <input type="radio" name="radio"/>
         Radio1
      </label>
  <label>
         <input type="radio" name="radio"/>
         Radio2
      </label>
</form>

answered Aug 03 '22 at 07:51

IT goldman

14,885
2
14
28

Actually(it's 150px) in original content i have a text field below it and also i have to show the message within pop up size which is 300px..Please suggest how to proceed – NedStark Aug 03 '22 at 08:01
You are packing quite a lot on the pseudo-element... But what do you mean? like a tool tip? – IT goldman Aug 03 '22 at 08:07

score 0 · Answer 2 · answered Aug 03 '22 at 07:58

Increase the width of ::after element

input[type=radio]:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%
}

input[type=radio]:checked:after {
  content: 'Are u sure you want to select all';
  display: inline-block;
  height: 15px;
  width:200px;
  background: transparent;
  border-radius: 50%;
}

<form>
  <label>
         <input type="radio" name="radio"/>
         Radio1
      </label>
  <label>
         <input type="radio" name="radio"/>
         Radio2
      </label>
</form>

Displaying text message below radio button once it is checked

2 Answers2