mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 06:07:33 +02:00
feat: Update contents
This commit is contained in:
Phuoc Nguyen
201
contents/custom-checkbox-button.mdx
Normal file
201
contents/custom-checkbox-button.mdx
Normal file
@@ -0,0 +1,201 @@
|
||||
---
|
||||
category: Input
|
||||
created: '2019-12-01'
|
||||
description: Create a custom checkbox button with CSS flexbox
|
||||
keywords: css checkbox, css flexbox
|
||||
thumbnail: /assets/css-layout/thumbnails/custom-checkbox-button.png
|
||||
title: Custom checkbox button
|
||||
---
|
||||
|
||||
## HTML
|
||||
|
||||
```html
|
||||
<label class="custom-checkbox-button">
|
||||
<!-- The real checkbox -->
|
||||
<input type="checkbox" class="custom-checkbox-button__input" />
|
||||
|
||||
<!-- The fake square -->
|
||||
<div class="custom-checkbox-button__square">
|
||||
<!-- The inner square -->
|
||||
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
|
||||
</div>
|
||||
|
||||
<!-- The text -->
|
||||
...
|
||||
</label>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
||||
```css
|
||||
.custom-checkbox-button {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__input {
|
||||
/* Hide it */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__square {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__checkbox {
|
||||
background-color: transparent;
|
||||
border-radius: 0.25rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__checkbox--selected {
|
||||
/* For selected checkbox */
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
```
|
||||
|
||||
<Playground>
|
||||
```css placeholders.css hidden
|
||||
.rectangle {
|
||||
background: #d1d5db;
|
||||
border-radius: 0.25rem;
|
||||
height: var(--rectangle-height);
|
||||
width: var(--rectangle-width);
|
||||
}
|
||||
.rectangle--hor.rectangle--20 {
|
||||
--rectangle-width: 20%;
|
||||
}
|
||||
.rectangle--hor.rectangle--40 {
|
||||
--rectangle-width: 40%;
|
||||
}
|
||||
.rectangle--hor.rectangle--60 {
|
||||
--rectangle-width: 60%;
|
||||
}
|
||||
.rectangle--hor.rectangle--80 {
|
||||
--rectangle-width: 80%;
|
||||
}
|
||||
.rectangle--hor.rectangle--100 {
|
||||
--rectangle-width: 100%;
|
||||
}
|
||||
.rectangle--hor.rectangle--sm {
|
||||
--rectangle-height: 0.5rem;
|
||||
}
|
||||
.rectangle--hor.rectangle--md {
|
||||
--rectangle-height: 2rem;
|
||||
}
|
||||
.rectangle--hor.rectangle--lg {
|
||||
--rectangle-height: 4rem;
|
||||
}
|
||||
.rectangle--ver.rectangle--20 {
|
||||
--rectangle-height: 20%;
|
||||
}
|
||||
.rectangle--ver.rectangle--40 {
|
||||
--rectangle-height: 40%;
|
||||
}
|
||||
.rectangle--ver.rectangle--60 {
|
||||
--rectangle-height: 60%;
|
||||
}
|
||||
.rectangle--ver.rectangle--80 {
|
||||
--rectangle-height: 80%;
|
||||
}
|
||||
.rectangle--ver.rectangle--100 {
|
||||
--rectangle-height: 100%;
|
||||
}
|
||||
.rectangle--ver.rectangle--sm {
|
||||
--rectangle-width: 0.5rem;
|
||||
}
|
||||
.rectangle--ver.rectangle--md {
|
||||
--rectangle-width: 2rem;
|
||||
}
|
||||
.rectangle--ver.rectangle--lg {
|
||||
--rectangle-width: 4rem;
|
||||
}
|
||||
```
|
||||
|
||||
```css styles.css hidden
|
||||
body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.custom-checkbox-button {
|
||||
/* Center the content horizontally */
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
/* Cursor */
|
||||
cursor: pointer;
|
||||
|
||||
/* Demo */
|
||||
margin: 0.25rem 0;
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__input {
|
||||
/* Hide it */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__square {
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
/* Spacing */
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__checkbox {
|
||||
background-color: transparent;
|
||||
border-radius: 0.25rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.custom-checkbox-button__checkbox--selected {
|
||||
/* For selected checkbox */
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
```
|
||||
|
||||
```html index.html hidden
|
||||
<label class="custom-checkbox-button">
|
||||
<input type="checkbox" class="custom-checkbox-button__input" />
|
||||
<div class="custom-checkbox-button__square">
|
||||
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
|
||||
</div>
|
||||
<div class="rectangle rectangle--hor rectangle--sm rectangle--60"></div>
|
||||
</label>
|
||||
|
||||
<label class="custom-checkbox-button">
|
||||
<input type="checkbox" class="custom-checkbox-button__input" />
|
||||
<div class="custom-checkbox-button__square">
|
||||
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
|
||||
</div>
|
||||
<div class="rectangle rectangle--hor rectangle--sm rectangle--80"></div>
|
||||
</label>
|
||||
|
||||
<label class="custom-checkbox-button">
|
||||
<input type="checkbox" class="custom-checkbox-button__input" />
|
||||
<div class="custom-checkbox-button__square">
|
||||
<div class="custom-checkbox-button__checkbox custom-checkbox-button__checkbox--selected"></div>
|
||||
</div>
|
||||
<div class="rectangle rectangle--hor rectangle--sm rectangle--40"></div>
|
||||
</label>
|
||||
```
|
||||
</Playground>
|
||||
|
||||
## See also
|
||||
|
||||
- [Box selector](https://phuoc.ng/collection/css-layout/box-selector)
|
||||
- [Custom radio button](https://phuoc.ng/collection/css-layout/custom-radio-button)
|
||||
Reference in New Issue
Block a user