.setting-line { padding: 5px; position: relative; } .setting-line > div { display: inline-block; vertical-align: top; font-size: 17px; padding-top: 2px; } .setting-line > .title { font-size: 19px; width: 100%; max-width: none; border-bottom: 1px solid; } .toggle { position: relative; display: inline-block; width: 45px; height: 27px; margin-right: 20px; } .toggle input { opacity: 0; position: absolute; } .select-wrapper { float: right; position: relative; height: 27px; min-width: 25%; } .select-wrapper select { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 2px solid #ccc; padding-right: 28px; width: 100%; } .select-wrapper img { pointer-events: none; position: absolute; right: 0; bottom: 0; background: #ccc; height: 100%; width: 28px; padding: 0px 4px; } .select-wrapper select option { color: initial; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .3s; transition: .3s; } .slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .3s; transition: .3s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3); } input:checked + .slider:before { -webkit-transform: translateX(19px); -ms-transform: translateX(19px); transform: translateX(19px); } .setting-line > .sub-settings { padding-left: 42px; width: 100%; display: block; }