返回

揭秘搜索框灰字提示的奥秘：聚焦即现，失焦即隐

前端

在构建用户界面时，搜索框是一个至关重要的元素。为了增强用户体验，经常会在搜索框中添加提示字以引导用户。这些提示字通常以灰色显示，在聚焦时消失，在失焦时出现。本文将深入探讨搜索框中灰字提示字的实现，为您提供所需的知识和代码，以便在自己的网站上使用此功能。

实现原理

搜索框灰字提示字的实现依赖于HTML和CSS。以下是实现步骤：

  1. HTML ：在搜索框的<input>元素中添加placeholder属性，并指定提示文字。例如：
<input type="search" placeholder="搜索...">
  1. CSS ：使用以下CSS规则来设置提示字的样式：
input::-webkit-input-placeholder {
  color: gray;
}

input:-moz-placeholder {
  color: gray;
}

input::-moz-placeholder {
  color: gray;
}

input:-ms-input-placeholder {
  color: gray;
}

控制提示字的可见性

要控制提示字在聚焦和失焦时的可见性，可以使用CSS的:focus和:not(:focus)伪类：

input:focus::-webkit-input-placeholder {
  display: none;
}

input:not(:focus)::-webkit-input-placeholder {
  display: block;
}

input:focus:-moz-placeholder {
  display: none;
}

input:not(:focus):-moz-placeholder {
  display: block;
}

input:focus::-moz-placeholder {
  display: none;
}

input:not(:focus::-moz-placeholder) {
  display: block;
}

input:focus:-ms-input-placeholder {
  display: none;
}

input:not(:focus):-ms-input-placeholder {
  display: block;
}

通过使用这些伪类，当搜索框获得焦点时，提示字将消失，当搜索框失去焦点时，提示字将再次出现。

实例演示

以下是一个使用上述代码实现搜索框灰字提示字的实例：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    input::-webkit-input-placeholder {
      color: gray;
    }

    input:-moz-placeholder {
      color: gray;
    }

    input::-moz-placeholder {
      color: gray;
    }

    input:-ms-input-placeholder {
      color: gray;
    }

    input:focus::-webkit-input-placeholder {
      display: none;
    }

    input:not(:focus)::-webkit-input-placeholder {
      display: block;
    }

    input:focus:-moz-placeholder {
      display: none;
    }

    input:not(:focus):-moz-placeholder {
      display: block;
    }

    input:focus::-moz-placeholder {
      display: none;
    }

    input:not(:focus::-moz-placeholder) {
      display: block;
    }

    input:focus:-ms-input-placeholder {
      display: none;
    }

    input:not(:focus):-ms-input-placeholder {
      display: block;
    }
  </style>
</head>
<body>
  <input type="search" placeholder="搜索...">
</body>
</html>

通过以上步骤，您可以在自己的网站上轻松实现搜索框灰字提示字，增强用户体验并提高搜索框的易用性。