huanggr
国瑞前端：如果拥有一款好看又好用的输入框呢，接下来我就带领大家一同探究一下：
css3实现高端搜索框
代码如下:css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | * { margin: 0; padding: 0; } .searchBox { margin: 50px auto 0; padding: 20px 50px; width: 600px; box-sizing: border-box; border-radius: 5px; background: #D7B086; } .searchBox form { position: relative; overflow: hidden; } .searchBox form::after,.searchBox form::before { content: '鼠标移入搜索'; position: absolute; top: 0; left: 0; line-height: 44px; text-align: center; width: 100%; height: 50%; background: #000; color: rgba(255,255,255,.5); font-size: 20px; overflow: hidden; z-index: 1; transition: all .3s; } /*.searchBox form::before { display: none; }*/ .searchBox form::after { top: auto; bottom: 0; line-height: 0; } .searchBox form:hover::before { top: -50%; } .searchBox form:hover::after { bottom: -50%; } .searchBox form input[type="search"] { width: 100%; height: 44px; font-size: 16px; padding: 0 60px 0 10px; } .searchBox form input[type="button"] { position: absolute; right: 5px; top: 5px; width: 50px; height: 34px; } |
html代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>国瑞前端</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <link rel="stylesheet" href="css/searchBox.css"> </head> <body> <div class="searchBox"> <form action=""> <input type="search" placeholder="请输入搜索的内容"> <input type="button" value="搜索"> </form> </div> </body> </html> |
7