如何建立一个样式新颖的CSS3搜索框


搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致...
       搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它。无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框?在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。


       HTML举例:
       正如接下来你所看到的,标记很少,并且很容易理解:
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>

       你可能注意到了HTML5的特殊属性,像placeholder和required,简介如下:
       .placeholder-基本上,这个属性的作用在于当文本框获得焦点之前,先在文本框里显示一个域的信息,直到获得焦点后,域的信息被隐藏。
       .required-这个属性说明了当前元素是表单提交中的一个必需属性。
       HTML5也给我们带来了一个新的type属性:type="search"。
       小贴士:HTML 元素像img 和input 都没有内容,所以,像before这样的伪元素不会为我们的搜索框呈现任何箭头。我的解决方案是使用button type="submit" 元素代替普通的input type="submit"。这样,我们就可以用ENTER键来提交表单。
       CSS举例
       接下来,你将会看到demo里必要的样式:
       清除浮动
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}

       表单元素
       有前缀的属性像-moz、-box、-shadow 不包括在内,我只想让下面的代码保持干净。
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}

       希望大家能喜欢这个教程。谢谢阅读!
在线演示:http://www.gbin1.com/gb/demoviewer/362/empty/672c3910-1c4e-4fc5-b4a1-1af7fbd459db.html.htm
下载:stylish-css3-search-box-demo.zip

更多 css 相关资讯

一组梦幻般的 CSS3 动画按钮效果

一组梦幻般的 CSS3 动画按钮效果

给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!(温馨提示:如果不显示请刷新页面,在 Chrome,Firefox 和 Safari 浏览器中效果最佳。)访问

css3制作日历风格登陆表单

css3制作日历风格登陆表单

好久没有发布案例了,今天发布一个@白牙同学制作的登录表单,这个表单风格类似于日历。其中较为复杂的是登录表单的中链环效果。通过五个span标签,配合CSS3的伪类来制作。

用CSS3打造一组闪亮的半透明按钮效果

用CSS3打造一组闪亮的半透明按钮效果

分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。 这些闪亮的按钮使用了两个 DIV 实现,一个

使用CSS3创建动态3D立方体

向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。   demo地址:http://www.paulrhayes.com/experiments/

CSS3制作下拉工具条

CSS3制作下拉工具条

Tooltip的效果,在Web上的运用对大家来说不在陌生了,然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去,制作这样的效果是无需任何脚本语言来

CSS 中的分离、抽象和层叠

CSS 中的分离、抽象和层叠

介绍 有很多充分的理由说明LESS和Sass的用途。css很难做到可维护性。LESS和Sass(类似工具)使css变成了一个更加易用的语言。 但是,当人们谈论到为什么他

避免CSS初学者常犯的那些错误

避免CSS初学者常犯的那些错误

1.不要忘记引号! font family: "Times New Roman", "Times Roman", Roman, serif; 2.正确的注视样式表。 /* This is a CSS Comment */ 3.不要忘记了标点符号 .class {

Pure CSS3 Circle Menu

Pure CSS3 Circle Menu

这个案例是一个圆形转盘导航,初看效果可能很多人都会认为不可思议,CSS3能做出这样的效果,是的,真的是CSS3做的。在整个效果中有几个关键之处, 扇形形是通过clip、border-

CSS3制作下拉菜单

CSS3制作下拉菜单

下拉菜单如果不需要兼容IE6的话,完全可以不依赖于任何js脚本实现,今天这个案例也是有关于CSS下拉菜单,但有别于以往的,主要区别是子菜单是固定 显示在那,而不是默认隐藏,鼠

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制的腾讯QQ企鹅Logo

CSS3绘制腾讯QQ的企鹅Logo效果 今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。 一、如何使用CSS3来绘制图形? 网络上经常能够看到一些用CSS3绘制的精致图

更多 button样式 相关资讯

更多 按钮 相关资讯

用CSS3打造一组闪亮的半透明按钮效果

用CSS3打造一组闪亮的半透明按钮效果

分享一组闪亮的半透明 CSS3 按钮效果。CSS3 为网页设计引入了众多强大的新功能,让设计和开发人员能够轻松的创作出精美的界面效果。 这些闪亮的按钮使用了两个 DIV 实现,一个

Pure CSS3 Create Luminous Button

Pure CSS3 Create Luminous Button

这是一个很简单的按钮效果,其来源于鬼哥的鬼群,看到鬼大问这样的按钮怎么制作,默认效果就不说了,说一下点击时的效果吧。当你点击按钮时,中间会有发 光,并向外扩散的淡光效果。看

推荐12个漂亮的CSS3按钮实现方案

推荐12个漂亮的CSS3按钮实现方案

在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍。今天,本文收集了12个很不错

很酷的 CSS3 导航按钮

HTML5加上CSS3做出的按钮会有怎样的效果,试试才知道 请看如下代码: [代码] [HTML]代码 view source print? 1

利用CSS3 Gradients创建无图片水晶按钮

没有css3之前,我们需要在PS中创建水晶按钮。有了css3,我们可以很容易生成水晶按 钮。尽管CSS3 Gradient还未得到大多数浏览器的支持,但各主流浏览器已经在自己的内核中支持css3

使用CSS3和RGBa创建超酷的按钮

使用CSS3和RGBa创建超酷的按钮

虽然CSS3仅仅增加了少数新特性,但是这些属性却可以做很多有用的事情,可以大大的简化我们的工作。我们今天做的这些按钮,就是充分利用CSS3的圆角、盒子阴影和文字阴影效果,同时使