CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-element
Sooraj
Sooraj

Reputation: 10567

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>

Upvotes: 2

Views: 2301

Answers (4)

Shaggy
Shaggy

Reputation: 6796

If you give your label element a background-color, as in the below Snippet, you will see the true "hit area".

.switch {
  background:red;
  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>

This illustrates a couple of issues:

  1. Your label is taller than its children,
  2. It is also narrower than its children,
  3. Its border-radius does not match that of its children, as it doesn't have one.

To solve these problems, you'll need to make a few changes to your CSS, as per the following Snippet (I've kept the background-color on the label for visualisation purposes):

.switch {
  background:red;
  border-radius:25px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}
.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: 25px;
  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>

Upvotes: 1

Raja Tamil
Raja Tamil

Reputation: 71

As you can see the image below that .switch class width is not wide enough on the right side.

screenshot of swift boundary

If you match .slider.round width to .switch width that should work. I also adjusted the height of .switch class so that it's boundary does not exceed. 

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

Upvotes: 0

kukkuz
kukkuz

Reputation: 42362

Remove height and width for the label and there you go!

.switch {
  position: relative;
  display: inline-block;
}
.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>

Upvotes: 1

Abhi
Abhi

Reputation: 4261

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; */

Upvotes: 2

Related Questions