Javascript 如何使用ZURB css在输入中添加十字标记以清除文本？

我们需要在输入文本框内添加一个十字标记，其目的是清除输入框中的文本

我已经添加了，但它没有显示在输入框内。我使用ZURB的CSS框架基金会。p>

。搜索输入{
背景图像：url（/assets/img/icons/search icon.svg）；
背景大小：1.25rem；
背景重复：无重复；
背景位置：左0.75rem中心；
文本缩进：1.8rem；
}
.input wrapper outer input、.input wrapper outer.按钮{
页边距底部：0；
}

x

给它一个绝对位置并应用定位

。搜索输入{
背景图像：url（/assets/img/icons/search icon.svg）；
背景大小：1.25rem；
背景重复：无重复；
背景位置：左0.75rem中心；
文本缩进：1.8rem；
}
.input wrapper outer input、.input wrapper outer.按钮{
页边距底部：0；
}
.input包装器{位置：相对；}
.处于活动状态{
位置：绝对位置；
排名：0；
身高：100%；
右：10px；
字体大小：24px；
}

x