【Django】WebPageでよくあるCheckBoxを表示させるDjango用のhtml fileの作成方法。

Django

2020.09.19

【Django】htmlページでよくあるチェックボックスを表示させる方法。

今回の記事はhtmlページ内でよくあるような地チェックボックスを実装させる方法をご紹介していきます。Djangoの内容というよりはhtmlとcssのご総会みたいな感じです。

htmlページを表示させる方法はいつもと同じですのでわからない方は私の過去記事でも別の参考記事ででも確認してみてください。

input[type="checkbox"] {
    display: none;
}

label {
    display: inline-block;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    border: solid 1px #ccc;
    transition: 0.25s;
    padding: 6px 18px;
    cursor: pointer;
    font-size: 14px;
    margin: 3px;
}

input[type="checkbox"]:checked + label {
    background: #00809d;
    color: #fff;
}

<!DOCTYPE html>
{% load static %}
<html>
 
<head>
    <meta charset="utf-8" />
    <title>test<title>
</head>
<link href="{% static 'css/style1.css' %}" rel="stylesheet">

<input type="checkbox" value="1" id="id_tags_0">
<label for="id_tags_0">test</label>

</html>