I am using Twitter bootstrap drop down button:
http://getbootstrap.com/components/#btn-dropdowns-single
And I would like to add checkmarks (not necessarily checkboxes) to those list items that the user has selected. Is there style already built in do this or does someone already have a solution built for this?
Thanks!
Here's a solution that doesn't require icon fonts or images. This is all the CSS you need:
.dropdown-item-checked::before {
position: absolute;
left: .4rem;
content: '✓';
font-weight: 600;
}
To add/remove a checkmark, just toggle the dropdown-item-checked modifier on the appropriate dropdown-item:
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item dropdown-item-checked">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
Here's what it looks like:
Demo: https://codepen.io/claviska/pen/aLxQgv
Source: https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus
Here's a simple solution using a Font Awesome icon: http://www.bootply.com/oJgbiXIzBM
Using the same HTML as http://getbootstrap.com/components/#btn-dropdowns-single
The CSS is:
.active-tick a::after {
content: '\f00c'; /* http://fontawesome.io/3.2.1/icon/ok/ */
font-family: 'FontAwesome';
float: right;
}
And here's an example of mutually exclusive ticks on the options:
$('li').click(function(e) {
$(this).addClass('active-tick').siblings().removeClass('active-tick');
});
I adapted claviska's great CSS-only answer so that it draws it with a rotated box that has 2 bordered sides, and this provides a more modern, geometric look than an HTML entity would provide.
.dropdown-item-checked::before
{
position: absolute;
left: 0.8rem;
margin-top: 1px;
content: '';
width: 6px;
height: 12px;
border-bottom: 3px solid #333;
border-right: 3px solid #333;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
I don't know of anything built into the bootstrap for this.
Firefox and Webkit browser support the background-image property on the option element:
<option style="background-image:url(check.gif);">Option</option>
Otherwise, you will need to resort to a jQuery solution. This is a nice one:
