I'm working on creating a dropdown menu in HTML that pulls the options from a CSS file. To accomplish this, I have assigned custom classes to each option and specified the option label in the CSS using the
CUSTOM_CLASS::after{content: "";}Here is an example of how I defined an option for the dropdown:
<option class="OPTION1_LABEL"></option>
Below is the corresponding CSS code:
.OPTION1_LABEL::after{content: "Option 1";}
.DROPDOWN_TITLE::after {
content: "Select option from dropdown";
}
.OPTION1_LABEL::after {
content: "Option 1";
}
.OPTION2_LABEL::after {
content: "Option 2";
}
.OPTION3_LABEL::after {
content: "Option 3";
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<span class="input-group-text DROPDOWN_TITLE"></span>
</div>
<div class="col">
<select class="form-control" id="myDropdown">
<option class="OPTION1_LABEL"></option>
<option class="OPTION2_LABEL"></option>
<option class="OPTION3_LABEL"></option>
</select>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>https://jsfiddle.net/fm623k48/
Despite my efforts, the dropdown menu remains empty. How can I troubleshoot this issue?