显示不同浏览器中复选框/单选按钮的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了显示不同浏览器中复选框/单选按钮的问题相关的知识，希望对你有一定的参考价值。
我正在使用bootstrap开发一个Web应用程序。它必须在不同的浏览器中运行。
我有多个包含标题和复选框的组，如下所示：
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn">
<input class="form-control" type="checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
它在Firefox和IE中工作，但在Chrome中，复选框（和radiobuttons）看起来不同。它们更大，上面有一个小灰色边框。
This是它在Firefox中的样子。
而this就是它在Chrome中的外观。
有谁知道，如何改变Chrome的外观？
答案
首先在复选框中你不想添加form-control，该类创建大复选框，所以删除它
对于复选框，有一个名为form-check-input的默认类，对于实际位置，你需要在父类中添加form-check但是如果你不想添加这些东西就可以了！
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
<style></style>
</head>
<body>
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn form-check">
<input class="form-check-input" type="checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
<!-- Scripts are here -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script></script>
</body>
</html>另一答案
通常表单控件用于文本区域但是如果你想使用它你可以覆盖css或者你可以使用自定义输入复选框
.form-control{width:20px!important;
font-size:5px!important;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div>
<h4>Liniensicherungen</h4>
<div class="form-group ">
<label for="cbxGrundliniensicherung" class="col-sm-6 col-form-label">Mit Grundliniensicherung:</label>
<div class="col-sm-6 paddingRadioBtn">
<input type="checkbox" class="form-control"aria-label="Text input with checkbox" name="cb_mit_grund_liniensicherung_runs_show" id="cbxGrundliniensicherung">
</div>
<div>
<div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>以上是关于显示不同浏览器中复选框/单选按钮的问题的主要内容，如果未能解决你的问题，请参考以下文章
如何验证单选按钮/复选框并且必须在 laravel 中选择一个