问题描述
基本上，我只是想更改下拉菜单元素的背景颜色，但我也想保留默认文本。现在，如果我没有在Select组件上显式设置背景色，则InputLabel中指定的文本就会很好显示，但是只要将style={{backgroundColor: "rgb(232,241,250)"}}添加到{{ 1}}，此Select文本消失。为什么会发生这种情况，以及可以采取哪些措施解决此问题？
代码段：
InputLabel屏幕截图：
解决方法
您应该在<!DOCTYPE html>
<html>
<header>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>ACA NHS</title>
<link rel="stylesheet" href="../stylesheet.css">
<link rel="shortcut icon" href="favico/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="favico/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="favico/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="favico/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="favico/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="favico/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="favico/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favico/favicon-16.png">
<link rel="apple-touch-icon" href="favico/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="favico/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="favico/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="favico/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="favico/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="favico/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="favico/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="favico/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favico/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="favico/favicon-144.png">
<meta name="msapplication-config" content="favico/browserconfig.xml">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
</header>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<img src="../logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground"> </p>
<nav>
<ul class="nav">
<li class="navlist"><a class="active" href="index.html">Home</a></li>
<li class="navlist"><a class="active" href="boyshome.html">Boys Campus</a></li>
<li class="navlist"><a class="active" href="girlshome.html">Girls Campus</a></li>
<li class="navlist"><a class="active" href="../../gpacalculator.html">GPA Calculator</a></li>
</ul>
</nav>
<div class="container">
<div class="container d-flex align-items-center flex-column">
<h3>GPA Calculator (12th Grade Courses)</h3>
<h4>Please insert your percentages</h4>
<input type="hidden" id="grade" value="12" />
<input type="hidden" id="certificate" value="IbCourses">
<div id="finalGpa" style="display: none;"></div>
<table >
<thead style="text-align: center;">
<tr>
<th >Subject</th>
<th >Percentages</th>
</tr>
</thead>
<tbody id="subjectTbl">
<tr>
<th scope="row">
<select>
<option value="English"> English</option>
<option value="IBEnglish">IB English</option>
</select>
</th>
<td><input type="text" id="English"> %</td>
</tr>
<tr>
<th scope="row">
<select>
<option value="math"> Regular Math</option>
<option value="IBMath"> IB math</option>
<option value="Elective"> Elective</option>
<option value="IBElective"> IB Elective</option>
</select>
</th>
<td><input type="text" id="math"> %</td>
</tr>
<tr>
<th scope="row">
<select>
<option value="Physics"> Physics</option>
<option value="IBPhysics"> IB physics</option>
<option value="Elective"> Elective</option>
<option value="IBElective"> IB Elective</option>
</select>
</th>
<td><input type="text" id="Physics"> %</td>
</tr>
<tr>
<th scope="row">Arabic</th>
<td><input type="text" id="Arabic"> %</td>
</tr>
<tr>
<th scope="row">Islam</th>
<td><input type="text" id="Islam"> %</td>
</tr>
<tr>
<th scope="row">Quran</th>
<td><input type="text" id="Quran"> %</td>
</tr>
<tr>
<th scope="row">
<select>
<option value="Elective"> regular Elective</option>
<option value="IBElective"> IB Elective</option>
</select>
</th>
<td><input type="text" id="quran"> %</td>
</tr>
<tr>
<th scope="row">
<select>
<option value="Elective"> regular Elective</option>
<option value="IBElective"> IB Elective</option>
</select>
</th>
<td><input type="text" id="elective"> %</td>
</tr>
</tbody>
</table>
<button id="gpa" onclick="gpa()">Get GPA</button>
</div>
<div id="resultDiv" style="display: none;">
<div class="row">
<div class="col-md-12 text-center">
<button id="resultDivBtn">Show GPA</button>
</div>
</div>
<div class="row" id="resultDivAll" style="display: none;" >
</div>
</div>
</div>
<footer class="footer-distributed">
<div class="footer-left">
<h3>NHS<span>ACA</span></h3>
<p class="footer-links">Boys Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/nhsb.aca/"><i class="fa fa-instagram"></i>
nhsb.aca</a> 
| 
<a href="mailto:nhsb.aca@gmail.com"><i class="fa fa-envelope"></i>
nhsb.aca@gmail.com</a>
</p>
<p class="footer-links">Girls Campus:</p>
<p class="footer-links">
<a href="https://www.instagram.com/aca.nhs/"><i class="fa fa-instagram"></i>
aca.nhs</a> 
| 
<a href="mailto:acanational.hs@gmail.com"><i class="fa fa-envelope"></i>
acanational.hs@gmail.com</a>
</p>
<br>
<p class="footer-company-name">© Mohammad al Nusif</p>
</div>
<div class="footer-center">
<br>
<br>
<br>
<div>
<a href="https://goo.gl/maps/B3vW2nPkNewZUyxW9"><i class="fa fa-map-marker"></i>
<p>Boys Campus Map</p></a>
</div>
<div>
<a href="https://goo.gl/maps/uKS7qgy5P6F8csRK7"><i class="fa fa-map-marker"></i>
<p>Girls Campus Map</p></a>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<br>
<br>
<br>
<span>Boys Campus:</span>
Advisor's Email - sali.alkhuraishi@aca.edu.kw<br>
President's Email - bahaabed2003@gmail.com<br>
Vice President's Email - azoibi17@gmail.com<br>
<br>
<span>Girls Campus:</span>
Advisor's Email - nicole.depew@aca.edu.kw<br>
President's Email - kayanalghanim@gmail.com<br>
Vice President's Email - skkh03@gmail.com <br>
<br>
<div class="footer-icons">
</div>
</div>
</footer>
</body>
<script src="../gpascripts/grade9.js"></script>
<script>
$(document).ready(function(){
$("#resultDivBtn").click(function(){
$("#resultDivBtn").hide();
});
});
</script>
</html>元素而不是variant元素上指定FormControl。将其放在Select上后，Select元素将无法获得“填充”变体的适当样式。
这是"filled" style for InputLabel的开头：
InputLabel请注意注释，该注释指示需要使用z-index才能将标签提高到不透明的背景颜色之上（如在“选择”中设置的一样）。
这是一个在 /* Styles applied to the root element if `variant="filled"`. */
filled: {
// Chrome's autofill feature gives the input field a yellow background.
// Since the input field is behind the label in the HTML tree,// the input field is drawn last and hides the label with an opaque background color.
// zIndex: 1 will raise the label above opaque background-colors of input.
zIndex: 1,上展示variant的工作示例：
FormControl 
设置时间 控制面板
错误1：Request method ‘DELETE‘ not supported 错误还原：...