and thanks for taking your time to help.
I'm trying to customize checkboxes for a site being made with bootstrap, which does not offer what I'm looking for. Unfortunately my CSS chops are somewhat weak.
I'm trying to make a calendar where each date is a checkbox that can be selected. I'd like the checkbox to be a bordered light grey circle with the date (1, 2, 3... 31) in the center. Hover over the circle and you get the pointer, and the circle becomes darker gray. Click on it and the circle becomes blue, with the text font changing color so as to be readable still. The dates will be filled in based on a php loop, as will the checkbox id, name, and value.
I haven't been able to come up with anything that works, and I've tried various techniques for customizing checkboxes. A big part of where I get stuck is keeping the date centered within the button, since "1" and "29" take up different space, but I want the checkbox to be the same size regardless of the number inside.
I'm not sure if I should be redefining the checkbox in CSS, which leaves me unsure of how to have the date text (1, 2, 3... 31) inserted by PHP, or hid the checkbox off-screen and use CSS to style a DIV or SPAN differently based on the state of the checkbox. With this method I can't seem to get the bootstrap DIV/SPAN to respond to the CSS fully.
<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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></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 class="bg-primary rounded-circle text-center m-1" style="height: 30px; width: 30px"><span class="align-middle text-light">17</span></div>
<div class="bg-primary rounded text-center px-2 m-1" style="height: 30px"><span class="align-middle text-light">Last Day</span></div>
</div>
</div>
</div>
</body>I've cut out as much failed code as I can, and this is where I'm stuck. Note, only the first date is active. I don't know how to use CSS to modify Bootstrap class inputs effectively.
Am I way off base, and there's a better way to do this?
Thanks, Seth
Aucun commentaire:
Enregistrer un commentaire