CSS 如何在输入表单内添加静态文本

在本文中，我们将介绍如何使用CSS在输入表单内添加静态文本。输入表单是网页中收集用户信息的重要组成部分，有时候我们需要在输入框内添加一些静态文本，用于提醒用户输入什么内容或者提供更多的信息。

阅读更多：CSS 教程

方法一：使用placeholder属性

HTML的输入框元素包含一个placeholder属性，可以用于在输入框内显示静态文本。这是最简单的方法，只需要在输入框标签中添加placeholder属性并设置值即可。

<input type="text" placeholder="请输入您的用户名">

在上面的示例中，输入框内将显示”请输入您的用户名”这个文本，提示用户输入的内容应当是用户名。

方法二：使用:before伪元素

另一种添加静态文本的方法是使用CSS的:before伪元素。通过在输入框所在的父元素上使用:before伪元素，我们可以在输入框前添加任意静态文本。

<div class="input-wrapper">
  <input type="text">
</div>

.input-wrapper:before {
  content: "用户名：";
}

在上述示例中，我们在输入框前添加了文本”用户名：”，通过CSS的content属性设置文本内容。这种方法可以灵活地控制文本的样式和位置。

方法三：使用绝对定位

还可以使用CSS的绝对定位来实现在输入框内添加静态文本的效果。

<div class="input-wrapper">
  <input type="text">
  <span class="static-text">用户名： </span>
</div>

.input-wrapper {
  position: relative;
}

.static-text {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
}

在上面的示例中，我们通过将静态文本用一个span标签包裹，并在CSS中设置绝对定位，将其放置在输入框内的指定位置。通过调整left、top和transform属性的值，可以自定义文本的位置和样式。

方法四：使用JavaScript

最后一种方法是使用JavaScript来实现在输入框内添加静态文本的效果。通过监听输入框的focus和blur事件，可以在输入框获得焦点和失去焦点时动态地添加和移除静态文本。

<div class="input-wrapper">
  <input type="text" onfocus="addStaticText()" onblur="removeStaticText()">
</div>

function addStaticText() {
  var inputWrapper = document.querySelector(".input-wrapper");
  var staticText = document.createElement("span");
  staticText.textContent = "用户名： ";
  inputWrapper.insertBefore(staticText, inputWrapper.firstChild);
}

function removeStaticText() {
  var inputWrapper = document.querySelector(".input-wrapper");
  var staticText = inputWrapper.querySelector("span");
  inputWrapper.removeChild(staticText);
}

以上是一个简单的JavaScript示例，通过在输入框获得焦点时添加一个span标签，并设置静态文本内容。在输入框失去焦点时，移除该span标签，实现添加和移除静态文本的效果。