How to make the border increase not affect the position of the absolute element?

.switch { position: relative; display: inline-block; width: 60px; 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:focus::before { border: solid 4px rgba(255, 216, 64, 0.6); content:'cxcx'; } input:checked:active + .slider { background-color: #303030; border: solid 10px #ffc620; position: absolute; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:active + .slider { box-shadow: 0 0 1px #2196F3; border: solid 4px rgba(255, 216, 64, .6); } input:checked + .slider { background-color: #2196F3; } .slider:focus { } input:focus + .slider { box-shadow: 0 0 1px #2196F3; border: solid 4px rgba(255, 216, 64, .6); } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } 
 <label class="switch"> <input type="checkbox" checked> <span class="slider round"></span> </label>

  • At cha there is so much superfluous ... I would delete more than half of the styles ... - Air
  • box-shadow: 0 0 0 4px rgba (255, 216, 64, 0.6); - CodeGust
  • but, box-shadow is a workaround. There is no answer. - CodeGust

1 answer 1

You should not use pseudo-classes or pseudo-elements where they are not needed in principle.

I would implement it like this:

 * { margin: 0; padding: 0; transition: all .3s; box-sizing: border-box; } html, body { color: white; width: 100%; height: 100%; background: #272727; } #wrapper { width: 100%; height: 100%; } #label-wrap { top: 20px; left: 20px; position: relative; display: block; width: 60px; height: 34px; } label.switch { position: absolute; display: inline-block; width: 100%; height: 100%; border-radius: 50px; background-color: #ccc; } input { display: none; } .slider { position: absolute; display: block; width: 30px; height: 30px; background: #2196F3; border-radius: 50%; border: 0px solid red; top: 50%; left: 3px; transform: translateY(-50%); pointer-events: none; } label.switch:active~.slider { border: 5px solid red; background-color: green; } input:checked~.slider { background-color: #ccc; left: 27px; } input:checked~label.switch { background-color: #2196F3; } 
 <div id="wrapper"> <div id="label-wrap"> <input type="checkbox" id="inp"> <label class="switch" for="inp"></label> <span class="slider round"></span> </div> </div>

  • thank. but how to add a border and background-color to it, with: focus on the slider? - CodeGust
  • something I hurried ... How to understand when focus , explain what exactly you want to implement? - Air
  • Not sure I understood correctly .... But the answer changed ... - Air
  • event: focus. hovers the mouse on the round slider - it glows with a yellow border. event: active - as I understand it, the mouse is clamped on the rounder - the background behind it changes oval. - CodeGust
  • The border should appear outside the roundels, not inside. - This is the question, and all the complexity. - CodeGust