CODEWITHSUNDEEP
htmlcss
Rand alrand
Rand alrand

Reputation: 84

block radio button

I want to make block for radio

This is my code. 

   
   <label> Rating
     <input type="radio">great
     <input type="radio">wonderful 
   </label>

But it does not work correctly.

Upvotes: 0

Views: 6372

Answers (5)

bhansa
bhansa

Reputation: 7514

You might not have do use any css here, you can create the structure using block elements.

Here you are trying to align a inline element in a block so you can use p, div or any other block element.

/* outline focus */
label:focus, input:focus{
  outline: dotted 2px red;
}

/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

Try this simple solution to display as list.

 label li {
    list-style:none;
    }
     <label> Rating
       <li><input type="radio" name="group1">great</li>
       <li><input type="radio" name="group1">wonderful </li>
       </label>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12969

Only with html:

<label> Rating: </label>

<p>
  <input type="radio" name="rate" id="great">
  <label for="great">great</label>
</p>

<p>
  <input type="radio" name="rate" id="wonderful">
  <label for="wonderful">wonderful</label>
</p>

Upvotes: 1

Polymer
Polymer

Reputation: 1108

<div style="display:flex; width: 120px;">
  <p style="flex:1">Rating</p>
  <div style="flex:1">
    <input type="radio">Good<br>
    <input type="radio">Great
  </div>
</div>

Do you mean something like this? You could also use a table to get the same effect.

Upvotes: 1

kyun
kyun

Reputation: 10274

label{
  display: block;
}
   <p> Rating</p>
   <label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
   <label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>

Upvotes: 3

Related Questions