html5配合css3实现带提示文字的输入框(摆脱js)

下面详细讲解“html5配合css3实现带提示文字的输入框(摆脱js)”的完整攻略。

1.概述

在前端开发中，常出现需要在输入框中提供提示文字的情形，原本的做法是通过 JavaScript 实现。现在，通过 HTML5 和 CSS3，我们也可以轻松地实现这个效果，不用依赖 JavaScript。

2.技术原理

实现带提示文字的输入框，需要使用以下 HTML5 属性：

• placeholder：设置输入框中的提示文字。

同时，为了美化输入框，使用 CSS3 中的 ::placeholder 伪元素来设置样式。

3.实现步骤

接下来，我们将通过示例演示如何实现带提示文字的输入框。

示例1

在这个示例中，我们实现了一个简单的带提示文字的输入框。

3.1 HTML 代码

<input type="text" placeholder="请输入关键字">

3.2 CSS 代码

/* 在此处设置输入框样式 */
input {
  border: 1px solid #666;
  padding: 10px;
  font-size: 16px;
}

/* 在此处设置提示文字样式 */
input::placeholder {
  color: #666;
}

在上面的 CSS 代码中，我们设置了输入框的边框样式、内边距和字体大小。然后，使用 ::placeholder 伪元素设置了提示文字的颜色。

示例2

在这个示例中，我们实现了一个带提示文字的输入框，并且在输入框中有一个搜索按钮。

3.1 HTML 代码

<div class="search-box">
  <input type="text" placeholder="请输入关键字">
  <button type="submit">搜索</button>
</div>

3.2 CSS 代码

/* 在此处设置输入框容器样式 */
.search-box {
  position: relative;
  display: inline-block;
}

/* 在此处设置输入框样式 */
input[type="text"] {
  border: 1px solid #666;
  padding: 10px 40px 10px 10px;
  font-size: 16px;
  width: 300px;
}

/* 在此处设置提示文字样式 */
input[type="text"]::placeholder {
  color: #666;
}

/* 在此处设置搜索按钮样式 */
button[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 10px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  cursor: pointer;
}

在上面的 CSS 代码中，我们设置了输入框容器的位置为相对定位，然后设置了输入框的边框样式、内边距、字体大小和宽度。使用 ::placeholder 伪元素设置了提示文字的颜色。最后，设置了搜索按钮的位置为绝对定位，让它覆盖在输入框的右侧，并设置了按钮的样式。

4.总结

通过以上的步骤，我们可以轻松地实现带提示文字的输入框，同时可以通过 CSS3 的样式设置让它更具美感。不用依赖 JavaScript，即可完成很多原本需要 JavaScript 才能实现的效果。