?
Solved

Checkbox layout in CSS

Posted on 2009-05-07
4
Medium Priority
?
500 Views
Last Modified: 2012-05-06
I'm trying to use checkboxes in a form layout using css. Does anyone have the css code and html for a css layout using checkboxes. My checkboxes are not lining up with the labels, and when I click on the labels it does not check the checkbox... even if I wrap the input tag with lable tag etc.
0
Comment
Question by:jasch2244
  • 2
4 Comments
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 2000 total points
ID: 24328921
If you want to align the labeltext vertical use style="vertical-align:middle;width:32;height:32;"
More info here:
http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers
http://www.xinotes.org/notes/topic/437/
 
 
0
 
LVL 20

Expert Comment

by:thehagman
ID: 24329077
Clicking on a label does not toggle the check box - that is by design: Clicking the label shall only *focus* an input element.
0
 
LVL 1

Author Comment

by:jasch2244
ID: 24329119
It appears that if you use a for in the lable tag or wrap the input tag with the lable tags that infact you can select / toggle the check box
0
 
LVL 1

Author Closing Comment

by:jasch2244
ID: 31579146
vertical-align on the input / checkbox seemed to fix the problem.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question