Javascript css html中的自定义输入框

我正在尝试获取如下所示的输入框：

我是CSS新手，所以我只想实现如何将文本放在输入框的边框中，或者我必须用边框制作一个div，然后将文本放在div的边框中

这是我目前的目标，我知道这不是一个好的目标，但介于两者之间

    input {
  display:block;
  width:100%;
  margin:10px 0;
  padding:10px;
  
}

我这样做了，但无法用边框将文本包装起来，任何建议都是可以接受的。

标签{
显示：块；
位置：相对位置；
底部：-10px；
宽度：适合的内容；
左：10px；
填充：0px 5px；
背景色：白色；
}
输入{
边框：2倍纯色灰色；
高度：30px；
宽度：300px；
填充物：5px10px；
字体大小：粗体；
}

名称

试试这个

名称
字段集>输入{
边界：无；
大纲：无；
宽度：100%；
}

至少展示您目前拥有的功能。您的最佳尝试。@RokoC.Buljan我仍在尝试，但无法选择正确的方法。刚才为css创建的。@SandeepTiwari可能正在做一些事情-写问题需要更多的时间，在google上搜索的时间更少。仅供参考。谢谢大家!@你们总是很棒，到处都是摇滚选民，其中有像你们这样的人渴望你们的答案，但我需要像边框一样的文字。我这样做就像文本然后输入框这将不起作用，如果你有一个梯度背景或图像上的形式。是的，你的权利，这不会在梯度背景工作。我甚至没有想到it@David很好，它能工作，但无法得到它请解释小比蒂试图添加一些解释那里