mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-22 10:16:08 +02:00
Code Issues Releases Wiki Activity
Files
fb65ee55413da21b5083d0089ff17aa59a0a561f
csslayout/contents/box-selector.md
Phuoc Nguyen 4cb6cc716a feat: Box selector
2022-09-24 12:04:06 +07:00

1.3 KiB
Raw Blame History

layout, title, description, keywords
layout title description keywords
layouts/post.njk Box selector Create a box selector with CSS css box selector

HTML

<div class="box-selector">...</div>

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

CSS

.box-selector {
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    padding: .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;
}

{% demo %}{% include "covers/box-selector.njk" %}{% enddemo %}

See also