Checkboxy - what is it? Styling checkboxes and radio buttons in pure CSS with confusion for old browsers What does it mean to combine checkboxes with avatars
In order to design checkboxes and radio buttons, in addition to design, today it is not necessary to hack a JavaScript solution (like my plugin), so only CSS can be used for this, moreover, it’s a big deal for old browsers (that’s not bad usability), as they do not support current CSS rules.
In other words - in current browsers checkboxes and radio buttons will look nice, up to what the design intended, and in the old ones (they were up to Internet Explorer version 8 and below) The stench is left behind with the design "for locks" characteristic of the skin-specific operating system.
Cream of that the possibility of HTML5 validation is saved styling elements (which you can not use when using JavaScript plugins). In today's browsers, її pіdtrimka is the norm for a long time.
important features
Sob everything came out, it’s important to vrakhovuvati step on:
- Cream, vlasne, the tag of the element itself, whichever mi want to decorate beautifully ( or ), Need a tag
- tag guilty to tag
"Focus" field in multiple pseudo-selectors: checked i: not. Why does the checkbox itself or the radio button become invisible, and their emulation is behind the help of pseudo-elements: before and: after for the tag
Styling for modern browsers
Let's take a look at the variant of the stylization of the styling elements of the form. Which of them is the most powerful - virishuvati you. The essence of this does not change.
Checkbox tags and radio buttons appear before the tag
For HTML code tse looking like an approaching rank:
Once again I want to show your respect - tag obov'azkovo guilty buti raztashovaniya front tag
CSS code for the checkbox 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 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);)
For additional powers of position, z-index and opacity for classes.checkbox and .radio we visually want the original elements, with which the stench is left in the same place where the elements will be styled. And for the help of the margin, a little bit of it is changed, so that the improvement of the HTML5 validation looked harmonious. Depending on the design of the checkbox and radio buttons, this entry can be changed.
Checkbox tags and radio buttons are in the middle of the tag
HTML code in this vipadka we will come:
By analogy with the previous version - tag obov'azkovo guilty buti raztashovaniya front tags with class.checkbox__text and.radio__text.
CSS code for the checkbox 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;) .checkbox input: checked + .checkbox__text: before (background: #9FD468;) .checkbox input : 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 be like this:
Radio input (position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px;) 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, but in the forward way, only the stench is stagnant for other selectors.
Styling for fixing old browsers
CSS code for the checkbox. In the comments before the code, I added an explanation about the browsers:
/* Styling for IE8 first, and more older versions so there's a bit of improvement to the standard checkbox. */.Checkbox (vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0;) / It shows that the label is clickable. * / .Checkbox + label (cursor: pointer;) / * This is how the checkbox looks in modern browsers, as well as IE9 and beyond. It's a shame that older browsers don't support selectors: not i: checked, they don't support all lower styles. In this type of checked, it seems to be without a double-dot in front, I wonder why it is so. */ .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);)
apply
Axis in such a clumsy rank tse i shy. zavdyaki given method, Checkbox and radio buttons help CSS you can do it as you please.
I am keeping you in my wake, my best readers, like a website builder. Today I will show you a class trick, which allows you to create classy checkboxes, richly beautiful, lower ti, which props html for a charm. I'll show you how to fight css styling checkbox-iv. In other words, I'll show you how to create beautiful checkboxes on css, so checkboxes.
Cob rose
Otzhe, it is often necessary to add to html code, If you see our checkboxes, as well as signatures before them (label), these fields need to be linked to each other, so when you click on the label, you can check the box.
So, I will comment a little. We have three bets: the checkbox field and signature to the new one. The skin field takes away your identifier, the link to the label is used for the help of the for attribute, where the name of the identifier is prescribed, with which it is necessary to link. While on the side everything looks like this, then it’s wonderful old look checkbox. In time we will change yoga.
We select input, draw up a span
So, now we need to attach the third side of the primary checkbox.
Input (
display: none;
}
Now it is necessary to complete new fields. We'll style the span element so that the stink is in the middle of 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
}
This selector was used to select all the spans in the labels, as they are in the code next to the inputs with the checkbox type. In this rank, the design zastosuetsya to our bedrooms. We give it a block-row type, the same width and height, access on the right, so that the text does not fit snugly.
Robimo so that everything worked out
Now it is necessary to do so, so that when you click in the middle of SPAN, so that when you select any option, a tick is automatically ticked in the new one. For whom I, for the cob of knowledge on the Internet, will change the icon with a check mark (it’s due to be in png format), changing її to expand our field. Now you have to insert the following code:
Input: checked + label span (
background: url (btn.png) no-repeat;
}
Everything, now pratsyuє! Try clicking and you'll see that when you select it, there is a beautiful tick. My picture was in the same folder that the css file was called btn.png, and such a record.
Well, what about our charming selector input: checked + label span? In fact, wine punishes the browser on the foot: if there are any checkboxes in the future, stop for sleeping in the labels background picture. The axis is so simple, we did it without scripts, creating beautiful checkboxes on pure css. Write in the comments, as if it was not clear.
Praise to your respect: Everyone wants to host their sites on a different hosting. I have analyzed hundreds of hostings and know the best - HostIQ There are hundreds of positive comments about this, the average rating of corystuvachs is 4.8 out of 5. Let your sites be kind.
In this article, we know about the input type checkbox HTML, and how stinks are processed in PHP.
single checkbox
Let's create a simple form with one checkbox:
PHP script ( checkbox-form.php) We can select the query option from the $_POST array. Also, $_POST['formWheelchair'] can be set to " Yes“That is the ensign for the option of restorations. If the ensign is not set, $_POST['formWheelchair'] will NOT be set.
Axis butt form processing in PHP:
$_POST[ 'formSubmit'] was set to " Yes", Since the value is set in the value checkbox attribute:
deputy " Yes"You can enter the value" 1 »Abo« on". Reconsider that the code of reverification in the PHP script is also updated.
Che-box group
Sometimes it is necessary to enter a group of PHP input type checkbox in the form. The advantage of the checkbox group is that the correspondent can select a few options. On the view of the radio button, for groups, only one option can be selected.
Vіzmemo guidance more butt and on yoga basis nadamo koristuvachevі list of budіvel:
Caution that the input type checkbox may have the same name (formDoor). І scho skin im'ya ends on. Vikoristovuyuchi one im'ya, we can point to those who checkboxy po'yazanі. For help, we indicate that the selected values will be available for the PHP script in the given array. Therefore, $ _POST [ 'formDoor'] rotates more than one row, as in a hovered application; the replacement of which is rotated the array, which is added up from the checkbox values, which were selected.
For example, if I select all options, $_POST [ 'formDoor'] will be an array that adds up to: (A, B, C, D, E). Lower the butt, how to enter the value of the array:
If you accept the non-referenced options, $_POST [ 'formDoor'] will NOT be delivered, then use an "empty" function to validate it. If the value is given, then we go through the array through a loop for the additional function count (), so that we rotate the array and display the alarms, which were selected.
As an ensign of the installations for the option " Acorn building“, then the array will match the value of 'A'. Likewise, as an exclamation " Carnegie Complex«, The array will be revenged C.
Verification, what is the specific option
It is often necessary to review which of the choices is a particular option from the available elements in the HTML input type checkbox group. Axis function, as zdіysnyuє such a reverb:
function IsChecked($chkname, $value)(if(!empty($_POST[$chkname]))(foreach($_POST[$chkname] as $chkval)(if($chkval == $value)(return true; ))) return false;)
To vicariously її, just click IsChecked ( checkbox_name, value). for example:
if (IsChecked("formDoor", "A")) (// check it out...) // or check it out into the box... $ price += IsChecked("formDoor", "A")? one hundred; $Price += IsChecked("formDoor", "B")? 20:0;
Get the butt code
Get the PHP code in the application form from the PHP input type checkbox.
The publication is given as a translation of the article “ Handling checkbox in a PHP form processor”, Prepared by a friendly team for the project
Zavdyaki CSS3, we can achieve practical whatever we need on the screen effect. In this way we can look, in some way we can style the checkbox and radio buttons.
Input: checked + label: before(content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px;)
Now, if we press the button on the radio, the main fault is the small white circle.
checkbox styleable
Now let's deal with the design of the checkboxes. For the cob, I repeat the element:
Input (display: none;)
We use the standard checkbox for the additional pseudo-element: before, just add a frame:
Checkbox label: before (border-radius: 3px;)
Let's add a "tick" symbol, which will appear when you click on the checkbox. Zrobimo tse by analogy with the radio district. This time we need to remake HTML symbol? ✓.
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;)
At the pіdbag, the axis of which is our fault to go:
subbags
At this level, we looked at a way that you can win for the radio buttons and checkboxes you need. Since we have won CSS3, then the given technique will be practiced only in browsers, as if to support this technology. In order to get similar results in more older browsers, you can speed up
tick in HTML forms, Abo "checkbox" is set by the tag input, Which values have type checkbox.
A tick means either good or bad luck. As an ensign of the installations, the browser will send the changes with the field names to the server. As if it’s out of the day, then, apparently, the browser doesn’t edit anything. To that attribute value cannot be seen until the number of bindings.
If it is necessary for the checkbox to be present behind the defaults, then it is necessary to add an attribute to the tag checked. You will see the axis like this:
And this is how the checkbox looks in the browser:
The presence of a checkbox does not mean that the choice of one of the present elements is to blame. At the link with cym, as in one form, there is a splice of checkboxes, then they should be given different names.
The code for the form hovered on the cob of the article will be available:
If you want to name it, then in the professional environment, the field is called "checkboxes".