Checkbox group. Pure CSS styling of checkboxes and radio buttons with compatibility for older browsers. Making it all work

In order to design checkboxes and radio buttons as required by design, today it is not necessary to use JavaScript solutions (like my plugin), because. only CSS can be used for this, and with backward compatibility for older browsers (that is, not at the expense of usability) that do not support modern CSS rules.

In other words, in modern browsers, checkboxes and radio buttons will look beautiful, in accordance with the intended design, but in older ones (this applies to Internet Explorer version 8 and below) they will remain with the "default" design, specific to each specific operating system.

Besides, retains HTML5 validation capability styled elements (which may not be the case when using JavaScript plugins). In modern browsers, its support has long been the norm.

Important Features

In order to succeed, it is important to consider the following:

Except, in fact, the element tag itself, which we want to beautifully style ( or ), you need a tag , thanks to which you can switch the element by clicking on the text, and not just on the element itself.
Tag must be before the tag (in this case, the state of the form element is toggled using the for attribute), or it must be inside a tag (in this case, the for attribute is not needed, but a wrapper tag for the text is needed).

The trick is to use the :checked and :not pseudo-selectors. At the same time, the checkbox or radio button itself is made invisible, and their emulation is carried out using pseudo-elements: before and: after for the tag or the aforementioned wrapper tag.

Styling for modern browsers

Consider both options for the location of the styled form element. Which one is the most convenient is up to you. The essence of this does not change.

Checkbox and radio button tags are placed before the tag

In HTML code it looks like this:

I toggle the checkbox And I switch the radio button

Once again I want to draw your attention - tag necessarily should be located before tag . If you swap them, nothing will work.

CSS code for the checkbox will be like this:

Checkbox ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox + label ( position: relative; padding: 0 0 0 60px; cursor: pointer; ) .checkbox + label :before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba( 0,0,0,.2); transition: .2s; ) .checkbox + label:after ( content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border -radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; ) .checkbox:checked + label:before ( background: #9FD468; ) .checkbox:checked + label:after ( left: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 ,0,.7); )

CSS code for the radio button will be like this:

Radio ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; ) .radio + label ( position: relative; padding: 0 0 0 35px; cursor: pointer; ) .radio + label :before ( content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; ) . radio + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

With the position , z-index , and opacity properties of the .checkbox and .radio classes, we visually hide the original elements while keeping them in the same place where the styled elements would be. And with the help of margin we shift them a little so that the HTML5 validation message looks harmonious. Depending on the design of the checkbox and radio button, this indent can be adjusted.

Checkbox and radio button tags are inside the tag

HTML code in this case would be:

I toggle the checkbox

And I switch the radio button

By analogy with the previous version - the tag necessarily should be located before tags with the class .checkbox__text and .radio__text .

CSS code for the checkbox will be like this:

Checkbox input ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox__text ( position: relative; padding: 0 0 0 60px; cursor: pointer; ) .checkbox__text:before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0 ,0,.2); transition: .2s; ) .checkbox__text:after ( content: ""; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; ) :checked + .checkbox__text:after ( left: 26px; ) .checkbox input:focus + .checkbox__text:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255.255.0.7); )

CSS code for the radio button will be like this:

Radio input ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; ) .radio__text ( position: relative; padding: 0 0 0 35px; cursor: pointer; ) .radio__text:before ( content: ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; ) .radio_text:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0, 0,0,.5); opacity: 0; transition: .2s; ) .radio input:checked + .radio__text:after ( opacity: 1; ) .radio input:focus + .radio__text:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

The styles here are the same as in the previous method, only they are applied to other selectors.

Styling for older browsers

CSS code for the checkbox. In the comments to the code, I added explanations regarding browsers:

/* First designate styles for IE8 and older versions i.e. here we are a little ennobling standard checkbox. */ .checkbox ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) /* This is for all browsers except very old ones that don't support plus selectors. We show that the label is clickable. */ .checkbox + label ( cursor: pointer; ) /* Next comes checkbox styling in modern browsers, as well as IE9 and above. Due to the fact that older browsers do not support :not and :checked selectors, all of the following styles will not work in them. In this case, checked is specified without a colon in front, for some reason it works that way. */ .checkbox:not(checked) ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox:not(checked) + label ( position: relative; padding: 0 0 0 60px; ) .checkbox:not(checked) + label:before ( content: ""; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; ) .checkbox:not(checked) + label:after ( content: ""; position: absolute ; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; ) .checkbox:checked + label:before ( background: #9FD468; ) .checkbox:checked + label:after ( left: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )

CSS code for the radio button:

Radio ( vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; ) .radio + label ( cursor: pointer; ) .radio:not(checked) ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; ) .radio:not(checked) + label ( position: relative; padding: 0 0 0 35px; ) .radio:not(checked) + label:before ( content : ""; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; ) .radio:not( checked) + label:after ( content: ""; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )

Examples

This is how it's done in such an easy way. Thanks to this method, you can style checkboxes and radio buttons using CSS the way you want.

I welcome you to my blog, dear readers interested in website building. Today I'll show you a cool trick that will allow you to create cool checkboxes that are much prettier than the default html offers. I'll show you how the checkbox design is done in css. In other words, I will show you how to make beautiful checkboxes (checkbox) on css, that is, checkmarks.

Initial markup

So, we need to start by adding a code to the html that will display our checkboxes, as well as labels for them (label), these fields need to be linked together so that when you click on the label, you can check the box.

Choice 1 Choice 2 Choice 3

So, I'll comment a little. We have three pairs: a checkbox field and a label for it. Each field gets its own identifier, the label is associated with the for attribute, where the name of the identifier to be associated is written. So far, everything on the page looks like this, that is, this is the usual appearance of checkboxes. Now we will change it.

We remove input, arrange spans

So, now we need to hide the regular checkboxes from the page.

Input (
display:none;
}

Now we need to somehow arrange the new fields. We'll style the span elements since they're inside the label .

Input + label span(
display:inline-block;
width:40px;
margin-right: 10px;
height:40px;
vertical-align:middle;
border: 5px solid green;
cursor:pointer;
border-radius: 5px
}

With this selector, we selected all the spans in the labels that are in the code immediately after the inputs with the checkbox type. Thus, the decoration will be applied to our spans. We give them a block-line type, a specific width and height, and padding to the right so that the text doesn't fit snugly.

Making it all work

Now you need to make it so that when you click inside the span, that is, when you select some option, a checkmark is automatically put in it. To do this, I first found the corresponding icon with a checkmark on the Internet (it must be in png format), reduced it to the size of our field. Now it remains to insert the following code:

Input:checked + label span(
background:url(btn.png) no-repeat;
}

Everything works now! Try clicking and you will see that a nice check mark appears when you select it. My image was in the same folder as the css file and was called btn.png , hence the entry.

So what does our magic input:checked + label span selector do? In essence, it tells the browser the following: when any of the checkboxes is checked, apply a background image to the spans in the labels. That's it, everything is simple, we did without scripts, making beautiful checkboxes on pure css. Write in the comments if something is not clear.

A minute of your attention: We all want to place our sites on a reliable hosting. I have analyzed hundreds of hosts and found the best one - HostIQ There are hundreds of positive reviews about it in the network, the average user rating is 4.8 out of 5. Let your sites be good.

Checkbox in HTML form, or "checkbox" is given by the tag input, which has a type checkbox.

A check mark indicates either agreement or disagreement. If the checkbox is checked, then the browser sends a variable with the field name to the server. If it is absent, then, accordingly, the browser does not send anything. Therefore the attribute value cannot be considered mandatory.

If there is a need for the checkbox to be present by default, then you need to add the attribute to the tag checked. It will look like this:

And this is how the checkbox looks in the browser:

The presence of a checkbox does not mean that a single element must be selected from those present. In this regard, if there are several checkboxes in one form, then they should be given different names.

The code for the form given at the beginning of the article will be as follows:

As for the name, in a professional environment, the field is called a "checkbox".

Thanks to CSS3, we can achieve almost any effect we need on the screen. In this tutorial, we'll look at how we can style checkboxes and radio buttons.

Input:checked + label:before ( content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; )

Now when we press the radio button, a small white circle should appear in the main gray circle.

Styling checkboxes

Now let's move on to styling the checkboxes. First, let's hide the element again:

Input ( display: none; )

Since we're removing the default checkbox display with the :before pseudo-element, we'll just add a border:

Checkbox label:before ( border-radius: 3px; )

Then we add the checkmark symbol that will appear when the checkbox is clicked. Let's do this by analogy with the radio circle. Do we need to convert the HTML character this time? ✓.

Input:checked + label:before ( content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center ; line-height: 15px; )

In the end, this is what we should get:

Results

In this tutorial, we looked at a method that you can use to display the radio buttons and checkboxes you need. Since we used CSS3, this technique will only work in browsers that support this technology. In order to achieve similar results in older browsers, you can use the appropriate

This guide will introduce you to HTML checkboxes and teach you how to handle them in PHP.

Single checkbox form

Let's create a simple form with a single checkbox.

In a PHP script (file checkbox-form.php) it is possible to read the value of a field using the $_POST array. If $_POST["formWheelchair"] is set to YES, then the checkbox has been selected. If the checkbox is not selected, then the $_POST["formWheelchair"] variable is not set.

Here is an example of processing a form in PHP:

The $_POST["formWheelchair"] variable is set to YES because the value attribute of the input tag is "YES" .

Please note that all checkboxes have the same name (formDoor). One name says that all the checkboxes are related. The square brackets indicate that all values will be available from the same array. That is, $_POST["formDoor"] will not return a string, as in the example above, instead it will return an array containing the values of the checkboxes that were selected by the user.

For example, if I check all checkboxes, $_POST["formDoor"] will return an array of (A,B,C,D,E) . In the example below, we get and display all the values in an array.

The empty function is useful in case the user hasn't selected anything. If the array is not empty, we count the number of selected checkboxes using the count function and output all values using the for loop.

If the "Acorn Building" checkbox is selected, then the array will contain the value "A".

Checking if a specific checkbox is selected

Often you want to check if a particular checkbox is selected. You can use the following function for this:

Function IsChecked($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( return true; ) ) ) return false; )

Now it's enough just to call the IsChecked(chkboxname, value) function. For example:

If(IsChecked("formDoor","A")) ( //do ... )