您可以使用Material Design。让我解释一下：
首先，让我们在head标记中写入以下代码来加载库：

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

现在在body标签中添加一个文本字段，其中包含我们想要的选项：

<label class="mdc-text-field mdc-text-field--filled">
    <span class="mdc-text-field__ripple"></span>
    <span class="mdc-floating-label" id="my-label-id">Hint text</span>
    <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
    <span class="mdc-line-ripple"></span>
</label>

最后，我们添加一个脚本来初始化我们想要的样式：

<script>
    const textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));
</script>

确保将脚本添加到body标记的末尾。
您可以看到可以使用here的所有其他组件。
虽然有更好的做法，但这一点必须做得足够好。