简单制作网站搜索框

简单, 制作, 制作网站站点, 网站站点, 搜索

随着互联网的快速发展，如今网站站点用户的需要也随之提高，这对于设计又是一次创新。
搜索框大概是web开发中最常用的UI元素之一，我想基本没有必要去介绍如何使用它。
无论是网站站点还是web应用，都会为了增强用户体验而添加它，那么您是不是也想过设计一个别致的搜索框？
在今天的文章中，大驾将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。
当然在开始介绍前您也可以下载源具体代码如下或者查看在线演示。
HTML举例：
正如接下来您所看到的，标记很少，并且很容易理解：

Search
您可能注意到了HTML5的特殊属性，像placeholder和required，简介如下：
.placeholder－基本上，这个属性的作用在于当文本框获得焦点之前，先在文本框里显示一个域的信息，直到获得焦点后，域的信息被隐藏。
.required－这个属性说明了当前元素是表单提交中的一个必需属性。
HTML5也给咱们带来了一个新的type属性：type＝"search"。
小贴士：HTML元素像img和input都没有内容，所以，像before这样的伪元素不会为咱们的搜索框呈现任何箭头。
我的解决方案是使用buttontype＝“submit”元素代替普通的inputtype=“submit”。
这样，咱们就可以用ENTER键来提交表单。
CSS举例
接下来，您将会看到demo里必要的样式：
清除浮动
.cf:before，.cf:after{
content：“”;
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
表单元素
有前缀的属性像－moz、－box、－shadow不包括在内，我只想让下面的具体代码如下保持干净。
/*Formwrapperstyling*/
.form-wrapper{
width：450px;
padding：15px;
margin：150pxauto50pxauto;
background：#444;
background：rgba（0，0，0，.2）;
border-radius：10px;
box-shadow：01px1pxrgba（0，0，0，.4）inset，01px0rgba（255，255，255，.2）;
}
/*Formtextinput*/
.form-wrapperinput{
width：330px;
height：20px;
padding：10px5px;
float：left;
font：bold15px‘lucidasans’，‘trebuchetMS’，‘Tahoma’;
border：0;
background：#eee;
border-radius：3px003px;
}
.form-wrapperinput:focus{
outline：0;
background：#fff;
box-shadow：002pxrgba（0，0，0，.8）inset;
}
.form-wrapperinput：：-webkit-input-placeholder{
color：#999;
font-weight：normal;
font-style：italic;
}
.form-wrapperinput：-moz-placeholder{
color：#999;
font-weight：normal;
font-style：italic;
}
.form-wrapperinput：-ms-input-placeholder{
color：#999;
font-weight：normal;
font-style：italic;
}
/*Formsubmitbutton*/
.form-wrapperbutton{
overflow：visible;
position：relative;
float：right;
border：0;
padding：0;
cursor：pointer;
height：40px;
width：110px;
font：bold15px/40px‘lucidasans’，‘trebuchetMS’，‘Tahoma’;
color：#fff;
text-transform：uppercase;
background：#d83c3c;
border-radius：03px3px0;
text-shadow：0-1px0rgba（0，0，0，.3）;
}
.form-wrapperbutton:hover{
background：#e54040;
}
.form-wrapperbutton:active，
.form-wrapperbutton:focus{
background：#c42f2f;
outline：0;
}
.form-wrapperbutton:before{/*leftarrow*/
content：‘’;
position：absolute;
border-width：8px8px8px0;
border-style：solidsolidsolidnone;
border-color：transparent#d83c3ctransparent;
top：12px;
left：-6px;
}
.form-wrapperbutton:hover:before{
border-right-color：#e54040;
}
.form-wrapperbutton:focus:before，
.form-wrapperbutton:active:before{
border-right-color：#c42f2f;
}
.form-wrapperbutton：：-moz-focus-inner{/*removeextrabuttonspacingforMozillaFirefox*/
border：0;
padding：0;
}
希望这个搜索框与HTML文本能给大驾提供方便！
制作网站站点 , 简单

@版权声明名站网址导航声明： 1.该文观点仅代表作者本人，名站网址导航系信息发布平台，名站网址导航仅提供信息存储空间服务。 2.名站网址导航所发布的一切资源、破解补丁、注册机和注册信息及软件的解密分析文章等仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该网站程序，请支持正版软件，购买注册，得到更好的正版服务。 3.如有侵权请邮件与咱们联系删除或处理（邮箱：[email 988365@gmail.com]），本站将立即改正，谢谢。