[英]Can't style radio buttons bootstrap?
我添加了內聯樣式表來為兩個單選按鈕上色，但是兩個單選按鈕保持藍色，它們沒有變成紅色或綠色。 這是代碼，您能幫我找到代碼中的錯誤嗎？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Ristorante Con Fusion</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/bootstrap-social.css" rel="stylesheet"> <link href="css/mystyles.css" rel="stylesheet"> </head> <body> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="btn-group" class="col-xs-12 col-sm-2 control-label">Sections</label> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" style ="background-color:red;" checked > True </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" style="background-color: green;" autocomplete="off"> False </label> </div></div> </form><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html> </body> </html>
將btn-primary類更改為btn-success變為綠色，並將btn-danger更改為紅色
您正在設置單選按鈕本身的樣式，但是使按鈕變成藍色的是包含它的標簽。 嘗試這個
<label class="btn btn-primary active" style ="background-color:red;">
<input type="radio" name="options" id="option1" autocomplete="off" checked > True
</label>
<label class="btn btn-primary" style="background-color: green;">
<input type="radio" name="options" id="option3" autocomplete="off"> False
</label>
樣式引導單選按鈕看起來像帶有表單驗證的普通按鈕
[英]style bootstrap radio buttons to look like normal buttons with form validation
Bootstrap/jQuery 單選按鈕在 Firefox/Safari 上不起作用
[英]Bootstrap/jQuery radio buttons don't work on Firefox/Safari
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.