CODEWITHSUNDEEP
htmlcssmaterialize
KetZoomer
KetZoomer

Reputation: 2914

Checkbox not Showing Up HTML

I am trying to display a checkbox in HTML, but it is not appearing. The checkbox does not show up in Chrome or Microsoft Edge. Everything else works fine. I am using Flask, Jinja, and MaterializeCSS, link: https://materializecss.com/. I am also using the google icons, along with stylesheet I made.

Below is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!-- Google Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="./static/styles.css">
</head>
<body>
    <form>
        <input type="checkbox" class="filled-in">
        <p>This Shows</p>
    </form>
</body>
</html>

BTW, if I press Shift-Ctrl-I in chrome and go to console, there are no errors (except about not having favicon).

Upvotes: 1

Views: 1403

Answers (1)

Alex Douglas
Alex Douglas

Reputation: 221

In the materializecss demo, they have the input wrapped in a label to create a for attribute specific to the input. Have you tried that? In the code above the checkbox input is only wrapped in a form.

Upvotes: 2

Related Questions