Topic: Border in switch
Expected behavior Switch aligns with lever when adding border
Actual behavior Deaar Team I was using switches and added border. Then I realized, that when adding borders, the round level is slightly off centered and I did not find a way to center it. Can you tell me what is needed to get the objects to properly align again? One can reproduce as soon as you add border.
Thanks Chris
Resources (screenshots, code snippets etc.)
.switch label input[type=checkbox]:checked+.lever {
background-color: #c7c7c7;
border: black;
border-radius: 5px;
border-style: double;
border-width: 2px;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.8
- Device: Windows1
- Browser: Chrome
- OS: Win10
- Provided sample code: No
- Provided link: No
csax commented 5 years ago
Never mind, I found it. Adjust the background: .switch label .lever { background-color: #c7c7c7; border: black; border-radius: 5px; border-style: double; border-width: 2px; }
Adjust the inactive sphere: .switch label .lever:after { top: -5px; }
Adjust the active sphere: .switch label input[type=checkbox]:checked + .lever:after { background-color: #7babe3; top: -5px; }
Marta Szymanska staff pro premium commented 5 years ago
Hi,
I'm glad you found it. Do you need more help from us?
Best, Marta
csax commented 5 years ago
Thanks Marta I am perfectly fine si far. Best regards Chris