开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

您将使用什么HTML/CSS来创建具有背景的文本输入？

您可以使用HTML和CSS来创建具有背景的文本输入。以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="input-container">
   <input type="text" class="input-with-background" placeholder="请输入文本">
  </div>
</body>
</html>

CSS代码（styles.css）：

.input-container {
  position: relative;
  display: inline-block;
}

.input-with-background {
  padding: 10px;
  background-color: #f1f1f1;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  width: 300px;
}

.input-container::before {
  content: "文本输入";
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background-color: #f1f1f1;
  padding: 0 5px;
  font-size: 16px;
}

在这个示例中，我们使用了一个<div>元素作为输入框的容器，并在其中添加了一个<input>元素。我们使用CSS来设置输入框的背景颜色、边框和圆角。我们还使用了::before伪元素来创建一个带有背景的文本标签，并将其定位在输入框的左侧。

相关搜索:仅使用html和css创建无法滚动的背景图像我应该使用什么维度来创建移动应用程序标题？(HTML/CSS)使用CSS在标题后面创建具有弱相同文本的标题文本如何使用bootstrap和CSS创建具有特定字体和背景颜色的图像？使用JavaScript来定向克隆的html输入的方法是什么如何使用html和css创建右箭头符号内的文本设计如果使用填充，如何在具有HTML/CSS的窗体中将文本框居中？有没有办法使用HTML文本区域的输入来填充堆栈或数组？是否可以使用MAIL REST API创建/发送同时具有文本/纯文本和文本/html正文的消息？Angular 5:如何使用相同的指令来限制输入字段并在html的标签中显示文本如何使用css和html为输入元素设置正确的文本溢出省略号？为什么在使用Ajax $().css时，html div中的所有文本都会改变颜色？如何使用Django的models.py中的数据创建一个按钮来更改html中的文本？如何使用Microsoft Bot Framework V4模板使用C#通过单击html文本和html表格内容的特定区域来获取用户输入使用Java和HTML来获得两个字符串输入的和的正确方法是什么？我应该在CSS中使用什么来在导航栏中的水平列表项之间创建空格？CSS/HTML来创建两个并排的、等宽的、可折叠的列，它们在展开后保持列的宽度，使用grid？为什么我不能在html中使用text-align: center将文本类型的表单输入字段居中？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

没有搜到相关的合辑

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭