I have a button that triggers a dropdown menu. The initial state looks like this:
https://i.sstatic.net/5yhrD.png
When the button is clicked, the + symbol changes to a selected state as shown below:
https://i.sstatic.net/n1Is2.png
How can I remove the selected area from the plus symbol?
Below is my code using Bootstrap:
.custom-container {
background-color: rgb(31, 182, 255);
border: 1px solid rgb(31, 182, 255);
border-radius: 20px;
height: 40px;
line-height: 40px;
margin: 8px;
text-align: center;
width: 40px;
}
.custom-dropdown {
color: rgb(255, 255, 255);
text-decoration: none;
}<!-- Bootstrap & jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Start of my code -->
<div class="custom-container">
<a class="dropdown-toggle noselect custom-dropdown" href="#" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-plus"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</div>
<!-- End of my code -->