Reputation:
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:
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
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