Skip to content

Instantly share code, notes, and snippets.

@grizmio

grizmio/foo.html

Created May 28, 2023 23:54
Show Gist options
  • Save grizmio/1c63915b77c1588b7098d5b7c698f2bd to your computer and use it in GitHub Desktop.
Save grizmio/1c63915b77c1588b7098d5b7c698f2bd to your computer and use it in GitHub Desktop.
Download ZIP
CSS, add checkmark to label when selected/checked bootstrap 5
Raw
foo.html
<html>
<body>
<style>
.btn-check:checked + label:before {
content: "✓";
left: 3px;
position: absolute;
}
</style>
<div class="col-md-6">
<div class="input-group input-group-dynamic mb-4 is-filled">
<label class="form-label">Foo or Bar</label>
<div>
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Foo</label>
</div>
<div>
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Bar</label>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment