旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css 搜刮框怎样变大【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:90


导读:搜刮条在我们网站是必不可少的,尤其是在有限的页面空间里,安排一个主要的搜刮条是个困难,本日将连系实例给人人引见一下怎样运用CSS3来完成一个可伸缩功用的搜刮条。构造:...
搜刮条在我们网站是必不可少的,尤其是在有限的页面空间里,安排一个主要的搜刮条是个困难,本日将连系实例给人人引见一下怎样运用CSS3来完成一个可伸缩功用的搜刮条。

构造:

<form class="demo-a">
<input placeholder="Search" type="search">
</form>

症结款式:

.demo-a input{width: 15px; border-radius: 10em; transition: all 0.5s ease 0s;}

.demo-a input:focus{width: 130px; box-shadow: 0 0 5px rgba(109,207,246,.5);}

现实效果图:

以上就是css 搜刮框怎样变大的细致内容,更多请关注ki4网别的相干文章!

标签:css