CODEWITHSUNDEEP
htmlcss
user6925364
user6925364

Reputation:

Checkbox element messed up

I was trying to create a normal form here: http://americanbitcoinacademy.com/test/student-registration.html

However, when I place the ff codes:

<div class="form-input-group">
  <label>Subjects:</label>
  <input type="checkbox" value="">Math
  <input type="checkbox" value="">Science
  <input type="checkbox" value="">English
</div>

My codes just messed up:

enter image description here

Using CSS and HTML how can I fixed this so that it can match the other form fields? How can make the these checkboxes appear normal sizes with their lable on the right side and not messing up with other fields?

You can use the inspector tool of Chrome to check my codes.

Upvotes: 0

Views: 90

Answers (1)

Matthew
Matthew

Reputation: 932

The problem is in the css below.

.sign-up .signup-form .form-input-group input {
    padding-left: 68px;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: none;
}

You are telling the checkbox's to expand the full width and height of the container. You can fix this by adding this to your css:

.sign-up .signup-form .form-input-group input[type="checkbox"] {
    width: auto;
    height: auto;
}

Upvotes: 1

Related Questions