csslayout/contents/box-selector.mdx

---
category: Input
created: '2022-09-24'
description: Create a box selector with CSS
keywords: css box selector
thumbnail: /assets/css-layout/thumbnails/box-selector.png
title: Box selector
---

## HTML

```html index.html
<div class="box-selector">...</div>

<!-- The selected variant -->
<div class="box-selector box-selector--selected">...</div>
```

## CSS

```css styles.css
.box-selector {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.box-selector--selected {
    /* Change the border color */
    border: 2px solid #3b82f6;

    /* Used to position the tick */
    position: relative;
}

/* The tick */
.box-selector--selected:before {
    /* Absolute position */
    content: '';
    left: 0.25rem;
    position: absolute;
    top: 0.25rem;

    /* Size */
    height: 1rem;
    width: 1rem;

    /* Background */
    background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
}
```

<Playground>
```css placeholders.css hidden
.lines {
    padding: 0.25rem 0;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.line {
    background: #d1d5db;
    height: 1px;
    margin-bottom: 0.25rem;
}
.line.line--20 {
    width: 20%;
}
.line.line--40 {
    width: 40%;
}
.line.line--60 {
    width: 60%;
}
.line.line--80 {
    width: 80%;
}
.line.line--100 {
    width: 100%;
}
```

```css styles.css hidden
body {
    align-items: center;
    display: flex;
    justify-content: center;
}
.box-selector-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    width: 16rem;
}

.box-selector {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

.box-selector--selected {
    border: 2px solid #3b82f6;
    position: relative;

    &:before {
        content: '';
        left: 0.25rem;
        position: absolute;
        top: 0.25rem;

        height: 1rem;
        width: 1rem;

        background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;
    }
}
```

```html index.html hidden
<div class="box-selector-container">
    <div class="box-selector box-selector--selected">
        <div class="lines">
            <div class="line line--80"></div>
            <div class="line line--40"></div>
            <div class="line line--100"></div>
            <div class="line line--60"></div>
            <div class="line line--20"></div>
        </div>
    </div>

    <div class="box-selector">
        <div class="lines">
            <div class="line line--80"></div>
            <div class="line line--40"></div>
            <div class="line line--100"></div>
            <div class="line line--60"></div>
            <div class="line line--20"></div>
        </div>
    </div>

    <div class="box-selector">
        <div class="lines">
            <div class="line line--80"></div>
            <div class="line line--40"></div>
            <div class="line line--100"></div>
            <div class="line line--60"></div>
            <div class="line line--20"></div>
        </div>
    </div>

    <div class="box-selector">
        <div class="lines">
            <div class="line line--80"></div>
            <div class="line line--40"></div>
            <div class="line line--100"></div>
            <div class="line line--60"></div>
            <div class="line line--20"></div>
        </div>
    </div>
</div>
```
</Playground>

## See also

-   [Custom checkbox button](https://phuoc.ng/collection/css-layout/custom-checkbox-button/)
-   [Custom radio button](https://phuoc.ng/collection/css-layout/custom-radio-button/)