Ways to implement a page check box using CSS

Product article

In our backstage, we need to set the precise advertising area, which is to select 31 provinces, autonomous regions and municipalities in the whole country. Well, the following picture is taken for granted:

There are several problems with this:

Many options, no rules, very tired to find

If it is an ad that has selected some of the options, the changes will still need to be looked at with the naked eye, unable to see which provinces to put in at a glance

Choose one, choose the next, and look at it from the beginning, even if it has been selected.

So I think, first of all, should be divided into "checked" and "unchecked" two batches, solve the 2nd problem, alleviate the 3rd problem; the next check box itself is of little value and can be replaced with another style; the only problem that can be introduced is when the user expects to see a small tick in the check box to indicate that the selected , if I move it open to the "checked" group, the user may be confused and need some time to learn.

So I talked to a product manager friend to talk about the idea, he said it is possible to confuse users, but if you can add animation effect, so basically no problem. Well, get started.

Technology Implementation Chapter

Recently Flexbox specifications, the browser has supported Display:flex, at the same time came a good news, the new implementation than the old Display:box; a lot faster. This time I am going to use Flexbox to solve the problem, because there is a very important attribute: order (previously called box-ordinal-group), it can change the layout of the elements of the arrangement, with CSS3 new selector, should be able to meet the needs.

First step split check/unchecked

(About Flexbox knowledge, you can learn through Google, although the search is more than the previous version, but the final version of the difference is not, but the name is different.) This article is not too much to explain, I will be all the people will be

　　Its own style can not be modified, so we have to help; To achieve the selected/unchecked distinction, it is necessary to use the Pseudo class: checked; Selector must be from outside to inside, from the front to the back, cannot select the parent element, so can not use to package, the final layout can only be:

CSS code copy content to clipboard

　　

　　

　　Xiao Bao 3225

　　

　　The king is old and white in vain

　　

　　Empty husband 31

　　

　　Valley Vernacular

　　

　　Meathill

　　

　　Master Skinflint

　　

Very simple, no explanation. CSS3 added "Next node" selector + to select the next node of a node, combining: Checked pseudo class can be selectedAnd it moves closer to the front by changing the order attribute:

CSS code copy content to clipboard

#container {

Display:flex;

Flex-direction:row;

Flex-wrap:wrap;

}

#container input,

#container Label {

Order:2; All options, label order is 2

}

Input[type=checkbox]:checked,

input[type=checkbox]:checked + Label {

order:0; The smaller, the more forward.

}

But this is only the selection of the content ahead of time, visual no real segmentation. So I decided to add a split line, which is selected, and the following is not selected. This time we need to use this selector, select the node after a node:

CSS code copy content to clipboard

HR {

Display:none; By default, no options are selected, and the split line is hidden

order:1; Split Line order is 1

width:100%; Guaranteed to dominate a line

}

input[type=checkbox]:checked ~ HR {

Display:block; The split line is displayed when the option is selected

}

http://jsfiddle.net/meathill/fPN3p/5/embedded/result/

This basic functionality has been implemented. But visually, typesetting is still not neat, the selected options and unselected options are not so obvious, so next I'm going to beautify the checkbox.

Step two, beautify the checkbox

This approach is similar to the previous, and also uses the CSS3 new selector. Front in order to realize ahead, without wrapping it with it, so when the options are long enough to cause a line break, there may be an embarrassing situation where the check box and the label are out. Fortunately, the value of the check box can be replaced with another style, so the small box is hidden, in turn will be the operating target, and then the point of the border background angle (reference from bootstrap 3), you can:

CSS code copy content to clipboard

Input[type=checkbox] {

Display:none;

}

Label {

min-width:120px;

border:1px solid #CCC;

PADDING:2PX 8px;

Text-align:center;

margin:0 5px 5px 0;

Background: #FFF;

Color: #333;

border-radius:3px;

Box-sizing:border-box;

}

Border-color: #ADADAD;

Background: #EBEBEB;

Cursor:pointer;

}

input[type=checkbox]:checked + Label {

order:0;

Background-color: #5cb85c;

Border-color: #4cae4c;

Color: #FFF;

}

Input[type=checkbox]:checked + Label:hover {

Background-color: #47a447;

Border-color: #398439;

}

This looks like there is room to rise, if you add a few icons to respond to user action, then the cost of learning will be lower, the expected after the operation will be more accurate. Then the font-awesome on the CDN, using: Before pseudo class plus small icon, the final effect

。

http://jsfiddle.net/meathill/fPN3p/4/embedded/result/

I accidentally found that this batch to add delete, the mouse can often point not move, should also be an unexpected harvest it.

Step three, join the animation education User (failed)

This functionality is basically done, but because of the modification of the behavior may lead to user confusion, so prepare to add an animation to help users understand the interaction.

Unfortunately, as a new feature, browser support is not perfect, although the specification stipulates "Animatable:yes", but the actual measurement under the chrome v.30 can not work:

http://jsfiddle.net/meathill/Ka66W/1/

It seems that only after the new version of the browser released to improve.

Compatibility

Use pure CSS to do components, almost do not worry about compatibility issues, because the browser itself has done a good backward compatibility, code at most not effective, generally not wrong.

Specific to this component, because only for visual effects, no additions and deletions to change any browser behavior, so there is no problem with compatibility. But the end result is that only browsers that support the Flexbox and CSS3 selectors can render properly.

My environment is window 8 + Chrome v.30, as well as Millet 2 + chrome v.30, tested through.

Postscript

Now CSS is strong, pure CSS can achieve a lot of functions, I hope to make more valuable things in the future. Share the implementation of this component, hope to be useful to everyone.