8款纯CSS3搜索框
来源:互联网 发布:淘宝空间怎么登陆 编辑:程序博客网 时间:2024/06/05 11:32
效果图:
[html] view plain copy
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>8款纯CSS3搜索框</title>
- <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- <link rel="stylesheet" href="style.css">
- <style>
- * {
- box-sizing: border-box;
- }
- body {
- margin: 0;
- padding: 0;
- background: #494A5F;
- font-weight: 500;
- font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
- }
- #container {
- width: 500px;
- height: 820px;
- margin: 0 auto;
- }
- div.search {padding: 30px 0;}
- form {
- position: relative;
- width: 300px;
- margin: 0 auto;
- }
- input, button {
- border: none;
- outline: none;
- }
- input {
- width: 100%;
- height: 42px;
- padding-left: 13px;
- padding-right:46px;
- }
- button {
- height: 42px;
- width: 42px;
- cursor: pointer;
- position: absolute;
- }
- /*搜索框1*/
- .bar1 {background: #A3D0C3;}
- .bar1 input {
- border: 2px solid #7BA7AB;
- border-radius: 5px;
- background: #F9F0DA;
- color: #9E9C9C;
- }
- .bar1 button {
- top: 0;
- right: 0;
- background: #7BA7AB;
- border-radius: 0 5px 5px 0;
- }
- .bar1 button:before {
- content: "\f002";
- font-family: FontAwesome;
- font-size: 16px;
- color: #F9F0DA;
- }
- /*搜索框2*/
- .bar2 {background: #DABB52;}
- .bar2 input, .bar2 button {
- border-radius: 3px;
- }
- .bar2 input {
- background: #F9F0DA;
- }
- .bar2 button {
- height: 26px;
- width: 26px;
- top: 8px;
- right: 8px;
- background: #F15B42;
- }
- .bar2 button:before {
- content: "\f105";
- font-family: FontAwesome;
- color: #F9F0DA;
- font-size: 20px;
- font-weight: bold;
- }
- /*搜索框3*/
- .bar3 {background: #F9F0DA;}
- .bar3 form {background: #A3D0C3;}
- .bar3 input, .bar3 button {
- background: transparent;
- }
- .bar3 button {
- top: 0;
- right: 0;
- }
- .bar3 button:before {
- content: "\f002";
- font-family: FontAwesome;
- font-size: 16px;
- color: #F9F0DA;
- }
- /*搜索框4*/
- .bar4 {background: #F15B42;}
- .bar4 form {
- background: #F9F0DA;
- border-bottom: 2px solid #BE290E;
- }
- .bar4 input, .bar4 button {
- background: transparent;
- }
- .bar4 button {
- top: 0;
- right: 0;
- }
- .bar4 button:before {
- content: "\f178";
- font-family: FontAwesome;
- font-size: 20px;
- color: #be290e;
- }
- /*搜索框5*/
- .bar5 {background: #683B4D;}
- .bar5 input, .bar5 button {
- background: transparent;
- }
- .bar5 input {
- border: 2px solid #F9F0DA;
- }
- .bar5 button {
- top: 0;
- right: 0;
- }
- .bar5 button:before {
- content: "\f002";
- font-family: FontAwesome;
- font-size: 16px;
- color: #F9F0DA;
- }
- .bar5 input:focus {
- border-color: #311c24
- }
- /*搜索框6*/
- .bar6 {background: #F9F0DA;}
- .bar6 input {
- border: 2px solid #c5464a;
- border-radius: 5px;
- background: transparent;
- top: 0;
- right: 0;
- }
- .bar6 button {
- background: #c5464a;
- border-radius: 0 5px 5px 0;
- width: 60px;
- top: 0;
- right: 0;
- }
- .bar6 button:before {
- content: "搜索";
- font-size: 13px;
- color: #F9F0DA;
- }
- /*搜索框7*/
- .bar7 {background: #7BA7AB;}
- .bar7 form {
- height: 42px;
- }
- .bar7 input {
- width: 250px;
- border-radius: 42px;
- border: 2px solid #324B4E;
- background: #F9F0DA;
- transition: .3s linear;
- float: right;
- }
- .bar7 input:focus {
- width: 300px;
- }
- .bar7 button {
- background: none;
- top: -2px;
- right: 0;
- }
- .bar7 button:before{
- content: "\f002";
- font-family: FontAwesome;
- color: #324b4e;
- }
- /*搜索框8*/
- .bar8 {background: #B46381;}
- .bar8 form {
- height: 42px;
- }
- .bar8 input {
- width: 0;
- padding: 0 42px 0 15px;
- border-bottom: 2px solid transparent;
- background: transparent;
- transition: .3s linear;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 2;
- }
- .bar8 input:focus {
- width: 300px;
- z-index: 1;
- border-bottom: 2px solid #F9F0DA;
- }
- .bar8 button {
- background: #683B4D;
- top: 0;
- right: 0;
- }
- .bar8 button:before {
- content: "\f002";
- font-family: FontAwesome;
- font-size: 16px;
- color: #F9F0DA;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div class="search bar1">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar2">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar3">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar4">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar5">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar6">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar7">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- <div class="search bar8">
- <form>
- <input type="text" placeholder="请输入您要搜索的内容...">
- <button type="submit"></button>
- </form>
- </div>
- </div>
- </body>
- </html>
阅读全文
0 0
- 8款纯CSS3搜索框
- 8款纯CSS3搜索框
- 【CSS3】8款好看的纯CSS3搜索框
- 8款精致的纯CSS3按钮特效
- Css3制作搜索框
- 纯css3自定义复选框checkbox样式
- 前端案例--纯CSS3美化复选框
- 8 套精致的纯 CSS3 按钮
- 纯css3手风琴特效代码
- 纯CSS3时钟
- 纯html+css3导航
- 纯CSS3文字效果推荐
- 纯CSS3文字效果推荐
- 纯CSS3文字效果推荐
- 纯CSS3文字效果推荐
- 纯CSS3文字效果推荐
- 纯CSS3文字效果推荐
- 纯CSS3 太极效果
- elasticsearch全局检索多分词器匹配
- solrCloud 索引更新逻辑学习笔记
- (二)webpack入门——webpack的使用
- 第二周项目三—时间复杂度
- 链表逆序
- 8款纯CSS3搜索框
- hive
- jsp 的默认路径
- L2-020. 功夫传人
- 网易2017春招[编程题]奇怪的表达式求值@Java
- BigDecimal各种舍入方式
- 机器学习
- android下实时传输h264并播放
- Java中线程状态切换