CSS实现平滑伸缩的搜索框实例

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

input, textarea{  
    color: #888;  
    padding: 5px;  
    margin: 10px;  
    outline: none;  
    overflow:hidden;  
    border-radius: 5px;  
    background: #fafafa;  
    border: 1px solid #ddd;  
    -moz-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);  
    -webkit-box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);  
    box-shadow: inset 1px 1px 10px rgba(0,0,0,0.1);  
    -webkit-transition: all .3s;  
    -moz-transition: all .3s;  
    -o-transition: all .3s;  
}  
.style1{  
      
}  
.style1:focus{  
      
}  
.style2{  
    float: right;  
      
}  
.style2:focus{  
      
}  
.style3{  
    width: 10%;  
}  
.style3:focus{  
    width: 98%;  
}  
.style4{  
    height: 2em;  
      
}  
.style4:focus{  
    height: 8em;  
}

</style>
</head>

<body>
<input class="style1" type="text" value="向右伸长一点点" />  
<br />  
<input class="style2" type="text" value="向左伸长一点点" />  
<br />  
<input class="style3" type="text" value="什么？你的搜索词很长？这个够用吗？" />  
<br />  
<textarea class="style4">下面有什么东西呢？   
  
祝君好运！ 
~~~~

提示：您可以先修改部分代码再运行

CSS实现平滑伸缩的搜索框实例

相关文章

精彩推荐