The input [type = & quot; checkbox & quot;] label is aligned with the font, inputcheckbox

Input [type = "checkbox"] the label is aligned with the font, inputcheckbox

Today we will share a practical technique. In actual projects, we will often encounter the problem of multiple selection and single choice of input tags in forms, however, because the style of the tag itself is different from the style of our project, it cannot be implemented. Let's tell you how to implement it today.

First: use pseudo classes: (Open Source China)

Note: In the page layout, there is still input [type = checkbox:

Its style is as follows:

 

The js script is used to control it later;

Type 2: Image

This is a tree control zTree

Note: It is best to make two state diagrams in the image and merge them into a spirit chart. Note that the class name application is introduced once, and the following modification background-position: 0 0; is enough;

Third: We recommend three methods to align the checkbox/input text box with the text:

1. Use css for text alignment:

<Input type = "checkbox" class = "vat"> <label class = "vat"> This is text </label>

Note: Do not add styles to the row. It is not convenient for later style management.

.vat{vertical-align:top}

2. Use the for Attribute alignment in the label

<Input type = "checkbox" id = "more"/> <label for = "more"> alignment is the desired effect </label>

3. Use label to wrap the entire input and text

<Label> <input type = "radio"/> male </label>

Reference original blog address: http://www.cnblogs.com/bubuchu/p/6079862.html