user4752928
user4752928

Reputation:

Position hover-over circle exactly over X

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

Answers (2)

skobaljic
skobaljic

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

Bellu
Bellu

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

Related Questions