I have the following code:
/* toggle button*/ *, *:after, *:before { box-sizing: border-box; } /*=====================*/ .checkbox { position: relative; display: inline-block; } .checkbox:after, .checkbox:before { font-family: FontAwesome; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; font-language-override: normal; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; text-rendering: auto; } .checkbox label { width: 90px; position: relative; display: inline-block; border-radius: 46px; transition: 0.4s; } .checkbox label:after { content: ''; position: absolute; width: 50px; border-radius: 100%; left: 0; z-index: 2; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.4s; } .checkbox input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; } .checkbox input:hover + label:after { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15); } .checkbox input:checked + label:after { left: 40px; } .model-7 .checkbox label { background: none; border: 5px solid #555; height: 42px; margin-left: 15px; } .model-7 .checkbox label:after { background: #555; box-shadow: none; top: 2px; left: 2px; width: 28px; height: 28px; } .model-7 .checkbox input:checked + label { border-color: #04c6db; } .model-7 .checkbox input:checked + label:after { background: #04c6db; left: 50px; }
<div class="model-7"> <div class="checkbox"> <input type="checkbox"> <label></label> </div> </div>
I want to resize the toggle button, but the problem is there is no element in the toggle button’s css that controls the height. I am able to control the width of the button, but there is no such element that controls the height of the button. Initially, in the .checkbox label
there was height: 42px;
but I removed it because it did not do anything. Whenever I would change the height from 42px
to 30px
, it would not work and so I just removed that. Any suggestions on how I can control the height of the button?
Advertisement
Answer
Modifying the label and its ::after
pseudo-element height resizes the toggle button
/* toggle button*/ *, *:after, *:before { box-sizing: border-box; } /*=====================*/ .checkbox { position: relative; display: inline-block; } .checkbox:after, .checkbox:before { font-family: FontAwesome; font-feature-settings: normal; -webkit-font-kerning: auto; font-kerning: auto; font-language-override: normal; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; text-rendering: auto; } .checkbox label { width: 90px; position: relative; display: inline-block; border-radius: 46px; transition: 0.4s; } .checkbox label:after { content: ''; position: absolute; width: 50px; border-radius: 100%; left: 0; z-index: 2; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); transition: 0.4s; } .checkbox input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; cursor: pointer; } .checkbox input:hover + label:after { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15); } .checkbox input:checked + label:after { left: 40px; } .model-7 .checkbox label { background: none; border: 5px solid #555; height: 30px; margin-left: 15px; } .model-7 .checkbox label:after { background: #555; box-shadow: none; top: 2px; left: 2px; width: 16px; height: 16px; } .model-7 .checkbox input:checked + label { border-color: #04c6db; } .model-7 .checkbox input:checked + label:after { background: #04c6db; left: 50px; }
<div class="model-7"> <div class="checkbox"> <input type="checkbox" > <label></label> </div> </div>