@siberiaweb/components/lib/example-styles/checkbox.css

Веб-компоненты.

/*
    Флажок.

    Требуется <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
 */
.sw-checkbox {
     color: #333333;
     font-size: 14px;
     font-weight: normal;
 }

.sw-checkbox input {
    position: fixed;
    top: -10000px;
}

.sw-checkbox label {
    align-items: center;
    color: #333333;
    display: flex;
    font-size: 14px;
    white-space: pre-line;
    word-break: break-all;
}

.sw-checkbox label::before {
    align-items: center;
    border: 1px solid #bbbbbb;
    content: "";
    display: flex;
    flex-shrink: 0;
    font-family: "Material Icons", sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 20px;
    justify-content: center;
    margin-right: 3px;
    width: 20px;
}

.sw-checkbox[ checked ] label::before {
    content: "check";
}

.sw-checkbox[ disabled ] label {
    color: #999999;
}

.sw-checkbox[ disabled ] label::before {
    border-color: #cccccc;
    color: #999999;
}

.sw-checkbox[ focused ] label::before {
    border-color: cornflowerblue;
}