一个漂亮的文本框格式
2013-07-18 09:30
393 查看
做项目时感觉自己的页面做的特别丑,然后就开始搜罗漂亮的页面,不过收集起来还真不容易,截下来一个感觉不错的文本框样式:
效果截图:
@CHARSET "UTF-8"; /* @group search */ .frm-search{ width: 149px; height: 34px; border: none; font-weight: bold; box-shadow: inner 1px 0 3px #5d9ebf; -moz-box-shadow: inner 1px 0 3px #5d9ebf; -webkit-box-shadow: inner 1px 0 3px #5d9ebf; background: #75bbe0; /* Old browsers */ background: -moz-linear-gradient(top, #75bbe0 0%, #c2e3f4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75bbe0), color-stop(100%,#c2e3f4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* IE10+ */ background: linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75bbe0', endColorstr='#c2e3f4',GradientType=0 ); /* IE6-9 */ color: #fffeff; text-shadow: 0 1px 1px #66aacd; -moz-text-shadow: 0 1px 1px #66aacd; -webkit-text-shadow: 0 1px 1px #66aacd; padding: 0 38px 0 8px; } /* individual: webkit */ .frm-search::-webkit-input-placeholder { color:#fff; font-weight: bold; } /* individual: mozilla */ .frm-search::-moz-placeholder { color:#fff; font-weight: bold; } .frm-search:focus{ background: #3ba7dd; /* Old browsers */ background: -moz-linear-gradient(top, #3ba7dd 0%, #98d4f2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3ba7dd), color-stop(100%,#98d4f2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* IE10+ */ background: linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ba7dd', endColorstr='#98d4f2',GradientType=0 ); /* IE6-9 */ } /* @end */
页面: <div style="float: left;" class="input-append"> <input class="frm-search" type="text" name="sampleName" id="search_sample" placeholder="请输入样本名称"/> <button class="btn btn-info" type="button" onclick="searchSample()"><i class="icon-search icon-white"> </i>检索</button> </div>
效果截图:
![](http://images.cnitblog.com/blog/524343/201307/18092903-da955cc0e6e649af836741b2e87da929.jpg)
相关文章推荐
- Qt5:一个文本框输入字符,另一个文本框输出其大写格式
- 教你DIY一个漂亮的Word文本框
- 『精品批处理』一个漂亮的进度条源码
- 如何用 Latex 写一个漂亮简历
- Java传入一个字符判断是不是日期格式
- c#的一个函数调用程序(怎样让用文本框输入m和n,结果用一个文本框(或列表框)显示出来。)
- 如何用VS2010新建一个类?用来写C++文件的标准格式建立?就是能做到声把声明放在.H里,实现放在.CPP里的
- VC++/MFC精讲多练#004:DIY一个漂亮的滚动条控件
- gdiplus将一种图片格式转换成另外一个指定图片格式,且可设置图片大小
- ASP.net中,如何让一个文本框得到焦点
- 分享一个在线制作GIF格式loading图片的好网址
- [SoapUI] 怎样确定一个应答报文的格式是不是标准的JSON
- php打印数组 --- 打印出漂亮格式的数组
- 用PERL 程序编写一个从ORACLE数据库中取数然后规范格式插入到EXCEL中的程序
- 手工构建一个简单格式的Excel
- M语言简单示例--加载多个相同格式的文件到一个文件中
- 用opencv处理视频时的一个基本格式
- 这篇很简单,只是一个新手发神经而已。关于oracle的date类型的格式转化。
- Java 一个?格式的解决
- 正则表达式对邮件地址进行校验以及从一个字符串中匹配出一个格式正确的邮件地址