HTML Dropdown Returns Blank

Question

由於某些原因，我的HTML下拉菜單返回的是完全空白的值。但是，將鼠標懸停在上方時可以看到這些值。我的代碼是在我的GitHub這裏：https://github.com/kekTEHfrahg/bengalidabbois/blob/master/index.html

編輯：對不起，得到了錯誤的鏈接。我現在修好了。

此外，對於特定的代碼與我的下拉：

<div translate="no" class="compact marquee" id="div_language"> 
      <select id="select_language" onchange="updateCountry()"> 
      <option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Català</option><option value="4">Čeština</option><option value="5">Dansk</option><option value="6">Deutsch</option><option value="7">English</option><option value="8">Español</option><option value="9">Euskara</option><option value="10">Filipino</option><option value="11">Français</option><option value="12">Galego</option><option value="13">Hrvatski</option><option value="14">IsiZulu</option><option value="15">Íslenska</option><option value="16">Italiano</option><option value="17">Lietuvių</option><option value="18">Magyar</option><option value="19">Nederlands</option><option value="20">Norsk bokmål</option><option value="21">Polski</option><option value="22">Português</option><option value="23">Română</option><option value="24">Slovenščina</option><option value="25">Slovenčina</option><option value="26">Suomi</option><option value="27">Svenska</option><option value="28">Tiếng Việt</option><option value="29">Türkçe</option><option value="30">Ελληνικά</option><option value="31">български</option><option value="32">Pусский</option><option value="33">Српски</option><option value="34">Українська</option><option value="35">한국어</option><option value="36">中文</option><option value="37">日本語</option><option value="38">हिन्दी</option><option value="39">ภาษาไทย</option></select>&nbsp;&nbsp; <select id="select_dialect" style="visibility: visible;"> 
      <option value="en-AU">Australia</option><option value="en-CA">Canada</option><option value="en-IN">India</option><option value="en-NZ">New Zealand</option><option value="en-ZA">South Africa</option><option value="en-GB">United Kingdom</option><option value="en-US">United States</option></select> 
     </div> 
    </div> 

這裏是CSS代碼。老實說，我沒有發現任何問題。是否有什麼錯誤的CSS使下拉空白？

<style> 
    .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0} 
    .speech input {border: 0; width: 240px; display: inline-block; height: 30px;} 
    .speech img {float: right; width: 40px } 
    l { 
    border: ipx solid black 
    } 
    /* Style the tabs */ 
ul.tab { 
    list-style-type: none; 
    border-radius:10px; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f2f2f2; 
} 
/* Float the list items side by side */ 
ul.tab li {float: left;} 
/* Style the links inside the list items */ 
ul.tab li a { 
    background-color:#d9d9d9; 
    display: inline-block; 
    color: black; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 17px; 
} 
/* Change background color of links on hover */ 
ul.tab li a:hover { 
    background-color:#999999 ; 
} 
/* Create an active/current tablink class */ 
ul.tab li a:focus, .active { 
    background-color: #ccc; 
} 
/* Style the tab content */ 
.tabcontent { 
    border-radius:10px; 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
} 
    /* All content below pertains to the function of the tabs in an "accordian" style */ 
button.accordion { 
    border-radius:26px; 
    background-color: #eee; 
    color: #444; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 
button.accordion.active, button.accordion:hover { 
    background-color: #ddd; 
} 
button.accordion:after { 
    content: '>>'; 
    color: #777; 
    font-weight: bold; 
    float: right; 
    margin-left: 5px; 
} 
button.accordion.active:after { 
    content: "<<"; 
} 
div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.2s ease-out; 
} 
#info { 
    font-size: 20px; 
    } 
    #div_start { 
    float: right; 
    } 
    #headline { 
    text-decoration: none 
    } 
    #results { 
    font-size: 14px; 
    font-weight: bold; 
    border: 1px solid #ddd; 
    padding: 15px; 
    text-align: left; 
    min-height: 150px; 
    } 
    #start_button { 
    border: 0; 
    background-color:transparent; 
    padding: 0; 
    } 
    .interim { 
    color: gray; 
    } 
    .final { 
    color: black; 
    padding-right: 3px; 
    } 
    .button { 
    display: none; 
    } 
    .marquee { 
    margin: 20px auto; 
    } 
    #buttons { 
    margin: 10px 0; 
    position: relative; 
    top: -50px; 
    } 
    #copy { 
    margin-top: 20px; 
    } 
    #copy > div { 
    display: none; 
    margin: 0 70px; 
    } 
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif} 
.w3-row-padding img {margin-bottom: 12px} 
/* Set the width of the sidebar to 120px */ 
.w3-sidebar {width: 120px;background: #222;} 
/* Add a left margin to the "page content" that matches the width of the sidebar (120px) */ 
#main {margin-left: 120px} 
/* Remove margins from "page content" on small screens */ 
@media only screen and (max-width: 600px) {#main {margin-left: 0}} 
</style> 

Answer 1

它看起來像W3Schools的樣式表設置每個元素的文本顏色爲白色（color: #fff!important;）。

這可以改變文本顏色選擇和選項元素很容易糾正：

select, option { 
    color: black; 
} 

---

您可以通過打開瀏覽器的開發工具，右鍵單擊該元素，然後尋找調試這樣的事情在用於呈現元素的CSS上。在這種特殊情況下，你的身體標記使用w3-green類，它在默認情況下下面的CSS：

.w3-green, .w3-hover-green:hover { 
    color: #fff!important; 
    background-color: #4CAF50!important; 
} 

此外，正規化樣式表（它可以對選擇元素最高的特異性）告訴瀏覽器從父項繼承顏色（每個選擇父項中沒有其他顏色聲明，直到它到達主體標籤）。

button, input, optgroup, select, textarea { 
    margin: 0; 
    font: inherit; 
    color: inherit; 
} 

Answer 2

你有很多的CSS庫，它們互相干擾。 Bootstrap.min.css將您選擇的顏色設置爲「繼承」。在bootstrap的樣式後添加這個來修復這個問題。

select {color:black;} 

您可以通過使用瀏覽器的開發者工具調試代碼，看看被應用到您的元素，並從該庫是什麼風格。