Thank you for dedicating your time to offer assistance.
I am currently in the process of customizing checkboxes for a website built with bootstrap. Unfortunately, I have limited CSS skills and haven't been able to achieve the desired outcome.
My goal is to create a calendar where each date is represented by a checkbox that users can select. The design I envision includes a light grey bordered circular checkbox with the date (1, 2, 3...31) positioned at the center. On hover, the circle should darken and display a pointer cursor, while clicking on it will change the circle to blue, with the font color adjusting for readability. The dates will be generated dynamically using a PHP loop to populate the checkbox id, name, and value.
Despite my efforts, I haven't found a working solution and have experimented with various techniques to customize checkboxes. One major challenge I face is maintaining the centered alignment of the date within the button, regardless of the varying width of numbers like "1" and "29".
I am uncertain whether redefining the checkbox in CSS is the correct approach. This uncertainty extends to inserting the date text (1, 2, 3...31) using PHP or hiding the checkbox off-screen and styling a DIV or SPAN differently based on its state. However, I struggle to make the Bootstrap DIV/SPAN elements fully responsive to the applied CSS styles.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.css">
<style>
.control-me::after {
color: black;
background-color:white;
}
#toggle:checked ~ .control-me::after {
color:white;
background-color:blue;
}
.visually-hidden {
position: absolute;
left: -100vw;
}
</style> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://localhost/choreboard/css/bootstrap.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="background-color: #E0E0E0">
<div class="row justify-content-center">
<div class='col-9'>
<div class="d-flex justify-content-around flex-wrap">
<div><label for="test"><input type="checkbox" id="test" class="visually-hidden"><div class="control-me border border-dark rounded-circle text-center m-1" style="height: 30px; width: 30px;"><span class="align-middle">2</span></div></label></div>
<div class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></div>
[...]
</div>
</div>
</div>
</body>I have removed unsuccessful attempts from the code, and this is the stage where I need assistance. Please note that only the first date is interactive. Additionally, I struggle to effectively manipulate Bootstrap class inputs using CSS.
Could there be a more effective method to achieve this task?
Warm regards, Seth