我正在使用語意用戶界面中的切換復選框
有沒有辦法將活動切換復選框的背景顏色從藍色更改為綠色?
我在我的 CSS 檔案中添加了以下 CSS 片段,但它不起作用
.ui.toggle.checkbox input:checked, .ui.toggle.checkbox input:checked {
background: green!important;
}
uj5u.com熱心網友回復:
試試這個(我從頁面https://semantic-ui.com/modules/checkbox.html嘗試過)。
訣竅是比他們提供的默認規則更具體。
理想情況下,您不應該調整 css 而不是在自定義后實際編譯所需的部分。
body {
margin: 20px !important;
}
.ui.toggle.checkbox input[type=checkbox]:checked~label::before,
.ui.toggle.checkbox input[type=checkbox]:checked:focus~label::before {
background: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc GXVGHXq xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<body>
<div class="ui toggle checkbox">
<input type="checkbox" name="public" checked>
<label>Subscribe to weekly newsletter</label>
</div>
<body>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/506291.html
