Reputation:
I am trying to perfectly position a perfectly round circle directly over the "X" upon hover-over. How to make that work?
.select2-selection__clear {
font-size:20px;
padding-right:10px;
}
.select2-selection__clear:hover {
background-color:#000;
color:#FFF;
width:20px;
height:20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
<span class="select2-selection__clear">×</span>
Upvotes: 1
Views: 220
Reputation: 9624
This way:
.select2-selection__clear {
display: inline-block;
font-size: 20px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 20px;
}
.select2-selection__clear:hover {
background-color: #000;
color: #fff;
}
<span class="select2-selection__clear">×</span>
This is better than setting padding, because it is more universal. Text inside may change, but the layout will not break (and the circle will actually be a circle).
Upvotes: 4
Reputation: 2573
Try giving an equal padding on left and right:
.select2-selection__clear {
font-size:20px;
padding-right:5px;
padding-left:5px;
}
Upvotes: 1