时间戳

首页 > 解决方案 > 不同浏览器中复选框/单选按钮的显示问题

html - 不同浏览器中复选框/单选按钮的显示问题

问题描述

我正在使用引导程序开发 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 中，复选框（和单选按钮）看起来不同。它们更大，上面有一个小的灰色边框。

如下所示，它在 Firefox 中显示。 这个

如下是它在 Chrome 中的外观。 这个

有谁知道，如何改变 Chrome 的外观？

标签： htmlcsstwitter-bootstrap

解决方案

首先在您不想添加的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>

推荐阅读