css html中的自定义输入框

Question

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

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

这是我目前的做法，我知道它不是很好，而是介于两者之间

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

我这样做了，但无法用边框包装文本，任何建议都是可观的。

Answer 1

尝试这个

<fieldset>
    <legend>Name</legend>
    <input type="text" name="name" id="name" placeholder="Enter your Name">
</fieldset>


<style>
    fieldset > input{
        border: none;
        outline: none;
        width: 100%;
    }
</style>

编辑：

字段集本身添加边框，图例标签在输入上方添加名称文本，然后您只需编辑输入元素，删除边框和轮廓属性，以免在聚焦显示多个边框时破坏设计，以及调整宽度以适合字段集，并且在添加文本时不要看起来很奇怪（见下文）。

<fieldset>
    <legend>Name</legend>
    <input type="text" name="name" id="name" placeholder="Enter your Name" value="a thousand of values hehe, see the text won't fit the fieldset">
</fieldset>


<style>
    fieldset > input{
        border: none;
        outline: none;
    }
</style>