Question 44359 in Html Question posted in
Some basic documentation can be found here.

How do I css checkbox and radio button in a form? – Html

I want to display like this:

You 're in: ()Europe ()Africa
            ()Australia ()Asia ()America

What are your hobbies: []Swimming []Cooking []Shopping
                       []Sport []Dance []Sing

But now I end up like this:

You 're in: ()Europe ()Africa ()Australia ()Asia ()America
What are your hobbies: []Swimming []Cooking []Shopping []Sport []Dance []Sing

My html:

<div class="container radio-container">
   <span>You are in:</span>
   <input type="radio" id="europe" name="regions" value="europe">Europe
   <input type="radio" id="africa" name="regions" value="africa">Africa
   <input type="radio" id="australia" name="regions" value="australia">Australia
   <input type="radio" id="asia" name="regions" value="asia">Asia
   <input type="radio" id="america" name="regions" value="america">America
</div>

<div class="container checkbox-container">
   <span>What are your hobbies:</span>
   <input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming
   <input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking
   <input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping
   <input type="checkbox" id="sport" name="sport" value="sport">Sport
   <input type="checkbox" id="dance" name="dance" value="dance">Dance
   <input type="checkbox" id="sing" name="sing" value="sing">Sing
</div>

Please help!

How do I css checkbox and radio button in a form?

Tags:

2

Answers


  1. 0

    Hi there / you can simply put ()Australia , ()Asia , ()America into a div .because divs with row. the next thing you should do is to add some paddign left and right to the div use this logic on your hobbies too.

      <div class="container radio-container">
    <div class="row">
      <label for="regions">You are in:</label>
      <input type="radio" id="europe" name="regions" value="europe">Europe
      <input type="radio" id="africa" name="regions" value="africa">Africa
    </div>
    <div class="row" style="padding: 0px 74px 0px 74px;">
      <input type="radio" id="australia" name="regions" value="australia">Australia
      <input type="radio" id="asia" name="regions" value="asia">Asia
      <input type="radio" id="america" name="regions" value="america">America
    </div>
  </div>
  <br>
  <div class="container checkbox-container">
    <div class="row">
      <label for="hobbies">What are your hobbies:</label>
      <input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming
      <input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking
      <input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping
    </div>
    <div class="row" style="padding: 0px 154px 0px 154px;">
      <input type="checkbox" id="sport" name="sport" value="sport">Sport
      <input type="checkbox" id="dance" name="dance" value="dance">Dance
      <input type="checkbox" id="sing" name="sing" value="sing">Sing
    </div>
  </div>
    Login or Signup to reply.
  2. 0 
    .container {
  display: flex;
  width: 100%;
  gap: 16px;
}

.label {
  white-space: nowrap;
}

.inputs-container {
  display: flex;
  flex-wrap: wrap;
}

.demo-small-width-continer {
  max-width: 400px;
}
    <div class='demo-small-width-continer'>
  <div class="container radio-container">
   <span class='label'>You are in:</span>
   <div class='inputs-container'>
     <label><input type="radio" id="europe" name="regions" value="europe">Europe</label>
     <label><input type="radio" id="africa" name="regions" value="africa">Africa</label>
     <label><input type="radio" id="australia" name="regions" value="australia">Australia</label>
     <label><input type="radio" id="asia" name="regions" value="asia">Asia</label>
     <label><input type="radio" id="america" name="regions" value="america">America</label>
   </div>
  </div>

  <div class="container checkbox-container">
   <span class='label'>What are your hobbies:</span>
   <div class='inputs-container'>
     <label><input type="checkbox" id="swimming" name="swimming" value="swimming">Swimming</label>
     <label><input type="checkbox" id="cooking" name="cooking" value="cooking">Cooking</label>
     <label><input type="checkbox" id="shopping" name="shopping" value="shopping">Shopping</label>
     <label><input type="checkbox" id="sport" name="sport" value="sport">Sport</label>
     <label><input type="checkbox" id="dance" name="dance" value="dance">Dance</label>
     <label><input type="checkbox" id="sing" name="sing" value="sing">Sing</label>
   </div>
  </div>
</div>
    1. It is always a good idea to have a label tag wrapper for your input type checkbox/radio – when the user clicks on text (placeholder) – he clicks on radio/checkbox automatically;
    2. You need to have a wrapper (for example, div) for your checkbox/radio elements if you want to have that structure you have described;
    3. After that you can set flex styles for this wrapper.

    I added a demo-small-width-continer wrapper for test, you don’t need it in your code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search