如何在输入框上添加文字？

Question

你知道如何在我的输入边框上创建这个额外的“*电子邮件”文本吗？

It should look like this!

Answer 1

嘿嘿

我目前正在 React 中做一个项目，其中有一个叫做 Material UI 的东西，里面有 TextFields。那里有不同类型的 TextField，例如 Standard、Filled 和 Outlined。 Image of TextFields。问题是您可以将其用于文本框。所有这些都在顶部有文字。

return (
        <div className='header'>
            <span className='title'>Word Hunt</span>
            <div className='inputs'>
                <ThemeProvider theme={darkTheme}>
                    <TextField id="outlined-basic" label="Outlined" variant="outlined" />
                </ThemeProvider>
            </div>
        </div>
    )

这是我项目中的一个例子。希望这对您有所帮助！

https://material-ui.com/components/text-fields/#text-field

Answer 2

.form-group{
  border:1px solid #999;
  margin:10px;
  border-radius: 5px;
}
.form-group>label{
  position:absolute;
  top:-1px;
  left:25px;
  background-color:white;
  color:#666;
  padding:0 5px;
}
.form-group .required{
  color:red;
  padding:0 5px;
}
.form-group>input{
  border:none;
  border:0;
  line-height;100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="form-group">
         <label><span class="required">*</span>Email</label>
         <input type="text" class="form-control input-lg" />
    </div>

如何在输入框上添加文字？

How to add text on input border?

html

css

input

border