Верхняя часть моего флажка больше не произносит слова после изменения размера и сброса материализации.
Вот пример кода:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <style> [type="checkbox"].reset-checkbox, [type="checkbox"].reset-checkbox:checked, [type="checkbox"].reset-checkbox:not(checked) { opacity: 1; position: relative; } [type="checkbox"].reset-checkbox+span::before, [type="checkbox"].reset-checkbox+span::after, [type="checkbox"].reset-checkbox:checked+span::before, [type="checkbox"].reset-checkbox:checked+span::after { display: none; } [type="checkbox"].reset-checkbox+span:not(.lever) { padding-left: 0px; } </style> </head> <body> <form action=""> <label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body>
Вот jsfiddle, который вы можете попробовать нажать верхняя часть флажка, если хотите: https://jsfiddle.net/j4oxgmtc/
Есть идея или решение?
Спасибо!
Андреас ответил на этот вопрос в комментарии: Исключить материализацию css для некоторых спецификаций c флажок
'' Это происходит, потому что это встроенный элемент. Вы можете установить display: inline-block, чтобы исправить это. ''
Вот измененный рабочий код: https://jsfiddle.net/vL3fsqjb/2/
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <style> [type="checkbox"].reset-checkbox, [type="checkbox"].reset-checkbox:checked, [type="checkbox"].reset-checkbox:not(checked) { opacity: 1; position: relative; } [type="checkbox"].reset-checkbox+span::before, [type="checkbox"].reset-checkbox+span::after, [type="checkbox"].reset-checkbox:checked+span::before, [type="checkbox"].reset-checkbox:checked+span::after { display: none; } [type="checkbox"].reset-checkbox+span:not(.lever) { padding-left: 0px; } </style>