Не закрывайте блокнот Jupyter после закрытия вкладки браузера

Этот флажок установлен как кнопка, которая показывает либо «Да», либо «Нет» в зависимости от состояния «проверено». Таким образом, он демонстрирует один способ замены текста с помощью CSS без необходимости писать какой-либо код.

Он по-прежнему будет вести себя как флажок, возвращающий (или не возвращающий) значение POST, но из точки отображения

Цвета могут быть не по своему вкусу, они только там, чтобы проиллюстрировать точку.

HTML:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... и CSS:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

Я только пробовал это в Firefox, но это стандартный CSS, поэтому он должен работать в другом месте.

30
задан Fotis 12 September 2015 в 14:17
поделиться