Html 将清除交叉按钮添加到文本/搜索输入，并使其浮动在文本旁边

我想在文本字段中添加一个clear按钮，该字段在输入文本之后浮动。有没有一种简单的方法可以使用搜索类型的输入字段来实现这一点

<input type="search">

---

您可以使用JavaScript将输入的文本复制到隐藏的

，并根据

的宽度移动重置按钮。（灵感来源于。）

var search=document.getElementById（“search”），
重置=document.getElementById（“重置”），
度量=document.getElementById（“度量”）；
search.addEventListener（“输入”，onInput）；
reset.addEventListener（“单击”，onInput）；
函数onInput（）{
measure.textContent=this.value；
reset.style.left=measure.offsetWidth+'px'；
console.log（测量偏移网络宽度）；
};
表单{
位置：相对位置；
保证金：1rem；
}
#搜索，
#量{
填充：.5rem；
字体系列：无衬线；
字号：1rem；
空白：pre；/*空白将有效工作*/
}
#搜寻{
宽度：100%；
}
#重置{
位置：绝对位置；
左：0；
排名：0；
身高：100%；
背景：透明；
边界：无；
颜色：#999；
光标：指针；
}
#量{
位置：绝对位置；
左：-9999px；
顶部：-9999px；
}
我想您需要一个按钮来清除输入内容
以下是要求的代码：

<input id = "inputBox" class="inputBox" type="search">
<button class="clear-button" onclick="myfunction()">Clear</button>

<script>
    function myfunction(){
        document.getElementById("inputBox").value = ""
    }
</script>


清楚的
函数myfunction（）{
document.getElementById（“inputBox”）.value=“”
}
您可以使用javascript或Jquery吗？在您自己的尝试中，您走了多远？它/它们哪里出了问题，以什么方式出了问题？我可以更容易地达到预期效果。我想知道是否有可能以所需的方式对其进行样式设置，以使“清除”按钮跟随文本，您需要JavaScript。那么我该如何操作？您需要动态计算输入值的宽度。您可以根据字符数（更容易但不太准确）或其实际值（更难但更准确）执行此操作。有关更多信息，请参阅。我已经编辑了我的响应以使用JavaScript，给出了一个更像您想要的结果。（如果您愿意，我建议在您的问题中添加一个“JavaScript”标记。）