Html 如何使用“clear”获取搜索输入的行为；x"；常规文本输入上的按钮？_Html_Css

Html 如何使用“clear”获取搜索输入的行为；x"；常规文本输入上的按钮？

html css

Html 如何使用“clear”获取搜索输入的行为；x"；常规文本输入上的按钮？,html,css,Html,Css,我试图在常规上获取的行为我尝试使用外观：searchfield未应用此特殊行为我希望它看起来怎么样：（在Chrome浏览器上测试，但不起作用）搜索纯CSS/HTML解决方案演示：这里介绍了解决问题的三种方法：一,️⃣ 当输入元素没有焦点时，其类型设置为搜索，然后显示x（清除按钮），当元素有焦点时，其类型设置为文本 .边界-0{ 边界：无； } .搜索边界{ 边框：1px实心；边界半径：5px；宽度：200px；显示器：flex；对齐项目：居中； } 嗨，如果您满意，请

我试图在常规

上获取

的行为

我尝试使用

外观：searchfield未应用此特殊行为
我希望它看起来怎么样：

（在Chrome浏览器上测试，但不起作用）
搜索纯CSS/HTML解决方案演示：
这里介绍了解决问题的三种方法：
一,️⃣ 当输入
元素没有焦点时，其类型
设置为搜索
，然后显示x
（清除按钮），当元素有焦点时，其类型设置为文本

.边界-0{
边界：无；
}
.搜索边界{
边框：1px实心；
边界半径：5px；
宽度：200px；
显示器：flex；
对齐项目：居中；
}

嗨，
如果您满意，请尝试此代码。使用您选择的搜索框宽度。还可以使用合适的关闭图标。类似的图标？两者都不是本机的，我只想使用css和HTML而不添加新的HTML元素，或者JSI更喜欢的东西而不添加任何新的HTML元素，但可能没有其他选择。让我们等待，如果有人可以解决它而不添加新的HTML元素，如果不是，我将接受这个答案
<html>
    <head>
        <style>
            .border-0{
                border: none;
            }
            .search-border{
                border: 1px solid;
                border-radius: 5px;
                width: 200px;
                display: flex;
                align-items: center;
            }
        </style>
    </head>
    <body>      
         <div class="search-border">
            <input type="text" placeholder="Search" class="border-0">
            <img src="/assets/close-icon-light.svg">      
         </div>       
    </body>
</html>