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

How to position HTML input checkboxes to the very left side using CSS

How do I position the input checkboxes to the very left side. I have a container div with flex, justify content and align items center, but want checkboxes starting to the left.

.candidate label {
  display: flex;
}

.candidate label input {
  position: absolute;
}
/*I tried using: */
.candidate label {
  display: flex;
}

.candidate label input {
  position: absolute;
}
<div class="item candidate">
  <p>Why are you the perfect Candidate?</p>
  <label>
    <input name="candidate" value="Cat-Person" type="checkbox"/>
    Because I am a Cat Person
  </label>
  <label>
    <input name="candidate" value="Companion" type="checkbox"/>
    Looking for a Companion
  </label>
  <label>
    <input name="candidate" value="Help" type="checkbox"/>
    Want to help Cats
  </label>
</div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Solved my problem with

    .candidate input{
  width: auto;
}

  2. 0 
    <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.candidate label {
  display: flex;
}

.candidate label {
  display: flex;
}

</style>
</head>
<body>

<div class="item candidate">
  <p>Why are you the perfect Candidate?</p>
  <label>
    <input name="candidate" value="Cat-Person" type="checkbox"/>
    Because I am a Cat Person
  </label>
  <label>
    <input name="candidate" value="Companion" type="checkbox"/>
    Looking for a Companion
  </label>
  <label>
    <input name="candidate" value="Help" type="checkbox"/>
    Want to help Cats
  </label>
</div>

</body>
</html>

    I have just remove the both of your position property in css and it all goes well now

    Login or Signup to reply.
  3. 0

    To position input checkboxes to the left of the content, simply use display: flex; on the container div and add some gap with the gap property. For vertical alignment, use align-items: center;. No need to use the position property.

    .candidate label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
    <div class="item candidate">
  <p>Why are you the perfect Candidate?</p>
  <label>
    <input name="candidate" value="Cat-Person" type="checkbox"/>
    Because I am a Cat Person
  </label>
  <label>
    <input name="candidate" value="Companion" type="checkbox"/>
    Looking for a Companion
  </label>
  <label>
    <input name="candidate" value="Help" type="checkbox"/>
    Want to help Cats
  </label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search