[分享]css3搜索框点击隐藏文本

搜索框是Web开发过程中常用的元素之一。为了提升搜索框的交互性，我们可以通过CSS3实现点击隐藏文本的效果。实现过程如下： 首先，在HTML中创建一个搜索框的输入框和搜索按钮： 搜索 然后，为搜...

搜索框是Web开发过程中常用的元素之一。为了提升搜索框的交互性，我们可以通过CSS3实现点击隐藏文本的效果。实现过程如下：
首先，在HTML中创建一个搜索框的输入框和搜索按钮：

<div class="search-box">
    <input type="text" placeholder="搜索">
    <button>搜索</button>
</div> 

然后，为搜索框的输入框设置一个CSS3动画效果。当输入框获得焦点时，隐藏输入框上方的文本，同时将输入框向上移动一定高度，让搜索框更加优雅：

<style>
.search-box {
    position: relative;
    overflow: hidden;
}
.search-box input[type="text"] {
    width: 200px;
    height: 30px;
    padding-left: 8px;
    border: none;
    outline: none;
    background-color: #f1f1f1;
    transition-property: all;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1.64, 0.57, 0.87);
}
.search-box input[type="text"]:focus {
    height: 60px;
    margin-top: -15px;
}
.search-box input[type="text"]:focus + p {
    opacity: 0;
}
.search-box p {
    position: absolute;
    top: 5px;
    left: 8px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #999;
    opacity: 1;
    transition: all 0.5s;
}
</style> 

最后，为输入框的上方添加文本，实现输入框点击隐藏文本的效果：

<div class="search-box">
    <input type="text">
    <p>搜索你想要的产品，人名，地点……</p>
    <button>搜索</button>
</div> 

通过CSS3实现搜索框点击隐藏文本的效果，可以给用户带来更好的使用体验，增强用户体验。