我有引導單選按鈕：
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input"....
我想在驗證表單時更改顏色。我嘗試了顏色、背景色、邊框、輪廓......沒有任何效果。
試圖添加引導 btn-danger 類......不......即使是重要的詞。
有沒有辦法動態改變按鈕的顏色（意思是用jquery addClass添加一個類）？
uj5u.com熱心網友回復：
也許 Bootstrap 樣式會覆寫您的樣式。
因此，您可以!important在 css Style 中使該元素僅獲取您的樣式。
例如
input
{
backgorund-color : black !important;
}
uj5u.com熱心網友回復：
當您的表單驗證為真時，在active類上添加custom-radio類
$(".custom-radio").addClass("active")
并將這個 css 放入你的 css
.custom-radio.active .custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #df1895; //desired color
background-color: #df1895; //desired color
}
uj5u.com熱心網友回復：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* default state */
.custom-radio .custom-control-label::before {
background-color: blue;
}
/* checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
background-color: red;
/* this background image SVG is just a white circle, you can replace it with any valid SVG code */
background-image: url(data:image/svg xml;charset=utf8,);
border-radius: 50%;
}
/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
color: #fff;
background-color: #ff0000; /* red color code */
}
/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); /* pink, 25% opacity */
}
</style>
<div class="container">
<div class="row mt-3">
<div class="col">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Red on click!</label>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
在其他人的幫助下，我找到了答案。你只需要添加這個 css 規則：
.active:checked~.custom-control-label::after {
background-color:red;
}
在您的輸入中添加“活動”類之后。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/437824.html
下一篇：外部點擊時關閉搜索下拉選單