Sooraj Chandran Sooraj Chandran - 4 months ago 27
CSS Question

Click triggers when clicked outside the div that have border radius

I have the following code to implement a toggle button. The problem with this is if I click on left top or left bottom corners outside the toggle button (still inside the bounding rectangle) , the click or check action is getting triggered as if it is a rectangle. Strangely this only happens in the left side not on the right side.

How can this be stopped?

( To recreate the problem click on left-top or left-bottom corner of the toggle switch )



.switch {
position: relative;
display: inline-block;
width: 40px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ECC71;
}
input:focus + .slider {
box-shadow: 0 0 1px #2ECC71;
}
input:checked + .slider:before {
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
transform: translateX(25px);
}
/* Rounded sliders */

.slider.round {
border-radius: 34px;
height: 25px;
width: 50px;
}
.slider.round:before {
border-radius: 50%;
}

<label class="switch">
<input type="checkbox">
<div id="utm-parameters-control" class="slider round accordion-control"></div>
</label>




Answer

You may remove the width and height from label with class="switch". That should fix the issue:

.switch {
    position: relative;
    display: inline-block;
    /* width: 40px; */
    /* height: 34px; */