Checkbox is not displaying when applying css

Gcobani Mkontwana

Hi Team

I have this code below, the issue with my checkbox are not displaying and there is not js file conflict when inspecting the element from the browser. What could be an issue? Please assist, thanks.

//css

#input[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

// html and php



     Booking Courses
    The courses available for booking or registration by the student.
    
        
            ping()) {
                die("Database connection failed.");
            }

            // Query to fetch available courses for the logged-in user
            $sql = "
            SELECT ac.course_id, ac.course_name, ac.duration, ac.category, ac.image
            FROM available_courses ac
            LEFT JOIN student_modules sm ON ac.course_name = sm.module_name AND sm.student_id = ?
            WHERE sm.student_id IS NULL";

            // Prepare the SQL statement
            $stmt = $conn->prepare($sql);
            if (!$stmt) {
                die("Error preparing the query: " . $conn->error);
            }

            // Bind the parameters
            $stmt->bind_param("i", $user_id); // Bind the user_id parameter

            // Execute the statement
            if (!$stmt->execute()) {
                die("Error executing the query: " . $stmt->error);
            }

            // Get the result
            $result = $stmt->get_result();
            if ($result === false) {
                die("Error fetching the result: " . $stmt->error);
            }

            // Check if courses exist for the logged-in user
            if ($result->num_rows > 0) {
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                echo '';
                while ($row = $result->fetch_assoc()) {
                    // Ensure image path is web-accessible
                    $imagePath = str_replace('C:/xampp/htdocs/', '/', htmlspecialchars($row['image']));

                    echo '';
                    echo '';
                    echo '';
                    echo '';
                    echo '';
                    echo '';
                    echo '';
                }
                echo '';
                echo 'Select Image Course Name Duration Category
' . htmlspecialchars($row['course_name']) . ' ' . htmlspecialchars($row['duration']) . ' ' . htmlspecialchars($row['category']) . '';
            } else {
                echo 'No courses available at the moment.';
            }

            // Close the statement and the connection
            $stmt->close();
            $conn->close();
            ?>

Select	Image	Course Name	Duration	Category
		' . htmlspecialchars($row['course_name']) . '	' . htmlspecialchars($row['duration']) . '	' . htmlspecialchars($row['category']) . '

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul1y ago

Accepted answer

Part -1

The issue with your checkboxes not displaying is likely due to the CSS selector being incorrect. The selector #input[type=checkbox] is invalid because # is used for IDs, but input[type=checkbox] is a generic element selector.

Replace the incorrect CSS with:

input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

input[type="checkbox"] is the correct selector for targeting checkboxes.
appearance: checkbox ensures the checkbox is displayed as a native checkbox.
Explicit width and height ensure consistent sizing.

If you want to style the checkboxes for better UI/UX, use this approach:

CSS for Custom Checkboxes

/* Hide the default checkbox */
input[type="checkbox"] {
    display: none;
}

/* Custom checkbox container */
.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    user-select: none;
}

/* Custom checkbox */
.checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* On hover, change background color */
.checkbox-container:hover .checkmark {
    background-color: #ccc;
}

/* When checked, change background color */
.checkbox-container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Add a checkmark when checked */
.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

HTML Update

Wrap the checkbox in a label with the checkbox-container class:

Tuhin Paul1y ago

You can add validation to check at least one course is selected:

document.addEventListener('DOMContentLoaded', function() {
    const courseForm = document.getElementById('courseForm');
    if (courseForm) {
        courseForm.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('input[name="course_ids[]"]:checked');
            const registerButton = document.getElementById('registerButton');
            if (registerButton) {
                registerButton.disabled = checkboxes.length === 0;
            }
        });

        courseForm.addEventListener('submit', function(event) {
            const checkboxes = document.querySelectorAll('input[name="course_ids[]"]:checked');
            if (checkboxes.length === 0) {
                event.preventDefault();
                alert('Please select at least one course.');
            }
        });
    }
});