Reputation: 1
I'm trying to get a checkbox to look like this
what I've tried
<div class="col-2">
<label for="WitholdingTax">Charge</label>
<div class="input-group mb-3">
<input type="checkbox" class="form-control" style="height:50px" aria-label="Amount (to the nearest dollar)">
<div class="input-group-prepend">
<span class="input-group-text" style="height:50px">0</span>
</div>
<div class="input-group-append">
<span class="input-group-text" style="height:50px">%</span>
</div>
</div>
</div>
And that looks like this Wrong box
Upvotes: 0
Views: 42
Reputation: 21
I tried to go as close as possible, you can modify this further and merge it with your own code if it works for you.
<label for="WitholdingTax">Charge</label>
<div style="display: flex; align-items: center;">
<div style="background-color: #D3D3D3; border-radius: 3px;">
<input type="checkbox" style="float: left; margin-right: 10px;">
<span style="float: left; margin-right: 60px; ">0</span>
<span style="float: left; border-left: 1px solid gray;">%</span>
</div>
</div>
Upvotes: 2