I need to add a floating label to this select menu. I found this framework https://tronic247.com/material/ and it seem to have a select component but no floating label, So how to add it / Thanks for any help.
<!DOCTYPE html>
<html>
<head>
<title>My Material design Web Page</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
<!-- CSS at head -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://res.cloudinary.com/tronic247/raw/upload/v1620900079/material.min.css" rel="stylesheet" />
</head>
<body>
<div class="container p-5">
<label for="rating">Choose a rating</label>
<select class="filled">
<optgroup label="Good">
<option value="5">5+</option>
<option value="10">10+</option>
<option value="" disabled="">10+</option>
</optgroup>
<optgroup label="Bad">
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
</select>
</div>
<!-- JS at footer for optimized loading -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://res.cloudinary.com/tronic247/raw/upload/v1620900084/material.min.js"></script>
</body>
</html>
As far as I can see from the documentation, the library you use does not have an option for floating labels. Try some other library that does have floating labels, like Material Design Lite or another that has built-in this option.