Как кнопку сделать чекбоксом

Как кнопку сделать чекбоксом

Как сделать чекбокс для активации кнопки или другого элемента? Вы, наверное, уже сталкивались много раз с примером работы подобных скриптов — каждый раз при регистрации. Пользователю предлагается нажать на чекбокс для подтверждения прочтения пользовательского и иных соглашений. Получается, что пока юзер не нажал на checkbox, кнопка Зарегистрироваться и тп не активируется.

Как сделать чекбокс на HTML/CSS

.container display: block;
user-select: none;
>

.container input opacity: 0;
height: 0;
width: 0;
>

.checkmark height: 23px;
width: 22px;
background-color: #eec321;
>

.checkmark background-color: #ccc678;
>

.checkmark background-color: #2196f3;
>

.checkmark:after content: «»;
position: absolute;
display: none;
>

.checkmark:after display: block;
>

.container .checkmark:after left: 8px;
top: 6px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
>

Pure CSS: Accessible Checkboxes and Radios Buttons

If you are reading this article, you know that adding custom styles to default checkboxes and radio buttons using just CSS is a pain. If you stick with the default options, they look different on different browsers. There are several solutions for getting around this problem using things such as vendor prefixes, background images, unicode characters, and icon fonts. But most of these solutions have issues of their own or are not consistent across all browsers. In addition, very few of these solutions focus on accessibility.

I also found that using any one of the above solutions doesn’t give me the look and feel that I want. But I did find a simple solution that doesn’t compromise the look and feel, and maintains accessibility.

So let’s get started! We will use the following:

• ::before and ::after pseudo-elements
• :checked CSS pseudo-class selector
• + adjacent sibling selector

Almost all browsers (IE 10 and above) have good support for the three items above.

I will demonstrate a solution for checkboxes here, but radio buttons use the same approach with slightly different styles.

Markup

The outer .checkbox wrapper is to encapsulate the input and label so that we know this chunk of the markup represents a checkbox.

The following things are required to make the checkbox work:

• The label must appear after the <input type="checkbox">
• The id attribute is required on the <input type="checkbox">
• The for attribute is required on the label

The reasons for these requirements will be explained in Step 3 of this article.

Step 1: Hiding the default checkbox without losing accessibility

Because we can’t style the default checkbox using CSS, we need to hide it. There are several ways to hide the <input type="checkbox"> :

• Use display: none
• Use visibility: hidden
• Use opacity: 0
• Position it off the screen using position: absolute and an insanely big value like left: -9999px

Here is an interesting article that covers some of these methods: http://webaim.org/techniques/css/invisiblecontent/. We don’t want to use the first two methods because a screen reader won’t be able to read the default checkbox. I like the third method best because we don’t necessarily have to position the checkbox off the screen for our use case. It can remain invisible at its current location.

Important Note: Although the hidden input is still accessible, we need to add :focus styles for users to easily detect it. We will do that in Step 4.

So let’s hide the default checkbox using opacity: 0 :

This is what we see after the first step:

Step 2: Creating a fake checkbox using pseudo-elements

Using the ::before and ::after pseudo-elements, we can create a fake checkbox. We’ll use the ::before element to create the outer box and the ::after element to create the checkmark. We’ll position these elements before the text in the label .

I’ve divided this step into three parts.

Part 1: Creating the outer box

We’ll make the ::before pseudo-element an inline-block element and assign it a height and a width . We’ll add a border to make it visible. You can also add your own custom styles instead of the border.

Note: content: "" is required to make the pseudo-element visible. If the content is not set, the pseudo-element will not be rendered.

Part 2: Creating the checkmark

We’ll make the ::after pseudo-element an inline-block and assign it a height and a width . We’ll also add custom styles to its left and bottom borders and rotate it by 45 degrees to make it look like a checkmark.

Part 3: Positioning the outer box and checkmark

We’ll use absolute positioning to position both pseudo-elements relative to the text in the label .

Step 3: Making the checkmark appear and disappear based on the checkbox state

Because we use the id attribute on the <input type="checkbox"> and the for attribute on the label , its possible to toggle the state of the default checkbox by clicking the label . And the reason we placed the label after the <input type="checkbox"> is so that we can leverage the :checked state of the <input type="checkbox"> to style the ::after pseudo-element (checkmark) of the label with the help of an + adjacent sibling selector as shown below:

We now have a functional checkbox but remember that its still not accessible.

Step 4: Adding the focus styles to make the checkbox accessible

Using the :focus selector on the <input type="checkbox"> , we can again use the + adjacent sibling selector to give the ::before pseudo-element (outer box) of the label a focus style. I like adding the same style that Google Chrome uses because users are most familiar with that style.

Try accessing the checkbox in the above example with a keyboard.

And we are done! We have a fully accessible, customizable and functional checkbox in just four simple steps.

Don’t forget to check out the pure CSS checkboxes and radio buttons in Project Clarity and feel free to let us know of your feedback!

check html checkbox using a button

I’m struggling to find a solution for this anywhere on Google, maybe i’m searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.

I’m wanting to use an html button to check an html check box. There reason I don’t want to use the check box will be purely for accessibility reasons because the application i’m developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.

The only issue is that the list of check box’s is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.

Im guessing it will require JavaScript (which I’m perfectly happy using now as I’m finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.

So to clarify: I want to click on a button, say it has a value of «Fin Rot» and that checks the check box with the value «Fin Rot». And then if I clicked another button, say it has a value of «Ich» then it also checks the check box with the value «Ich»

How TO — Custom Checkbox

Learn how to create custom checkboxes and radio buttons with CSS.

Default:

Custom checkbox:

One Two Three Four

Custom radio button:

One Two Three Four

How To Create a Custom Checkbox

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default checkbox */
.container input <
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
>

/* Create a custom checkbox */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
>

/* On mouse-over, add a grey background color */
.container:hover input

.checkmark <
background-color: #ccc;
>

/* When the checkbox is checked, add a blue background */
.container input:checked

.checkmark <
background-color: #2196F3;
>

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after <
content: "";
position: absolute;
display: none;
>

/* Show the checkmark when checked */
.container input:checked

.checkmark:after <
display: block;
>

/* Style the checkmark/indicator */
.container .checkmark:after <
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
>

How To Create a Custom Radio Button

Example

/* Customize the label (the container) */
.container <
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>

/* Hide the browser’s default radio button */
.container input <
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
>

/* Create a custom radio button */
.checkmark <
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
>

/* On mouse-over, add a grey background color */
.container:hover input

.checkmark <
background-color: #ccc;
>

/* When the radio button is checked, add a blue background */
.container input:checked

.checkmark <
background-color: #2196F3;
>

/* Create the indicator (the dot/circle — hidden when not checked) */
.checkmark:after <
content: "";
position: absolute;
display: none;
>

/* Show the indicator (dot/circle) when checked */
.container input:checked

.checkmark:after <
display: block;
>

/* Style the indicator (dot/circle) */
.container .checkmark:after <
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
>