有沒有辦法在語義 ui 中更改切換復選框的背景顏色？
[英]Is there a way to change the background color of a toggle checkbox in semantic ui?
問題描述
我正在使用語義用戶界面中的切換復選框
有沒有辦法將活動切換復選框的背景顏色從藍色更改為綠色？
我在我的 CSS 文件中添加了以下 CSS 片段，但它不起作用
.ui.toggle.checkbox input:checked, .ui.toggle.checkbox input:checked {
background: green!important;
}
1 個解決方案
解決方案1
0 2022-09-09 12:53:42
試試這個（我從頁面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>
語義 UI：切換復選框在頁面上移動，浮動就像固定定位
[英]Semantic UI: Toggle Checkbox moves on page, floats as if fixed positioning
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.