Question

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

This是它在Firefox中的外观。

this是它在Chrome浏览器中的外观。

有人知道如何在Chrome中更改外观吗？

Answer 1

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

Answer 2

通常将表单控件用于文本区域，但如果要使用它，则可以覆盖CSS或使用自定义输入复选框

Sheets.Spreadsheets.Values.batchUpdate(resource, spreadsheetId);

.form-control{width:20px!important;
font-size:5px!important;}

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

2 个答案: