2. 程式人生 > >【CSS3】8款好看的純CSS3搜尋框

【CSS3】8款好看的純CSS3搜尋框

阿新 • • 發佈：2019-02-17
* { 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; } 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; }

相關推薦

【CSS3】8款好看的純CSS3搜尋框

* { box-sizing: border-box; } body { margin: 0; padding: 0; background: #494A5F;

【轉】一款開源免費跨瀏覽器的視頻播放器--videojs使用介紹

med padding 網站 最新代碼 html 但是 videojs let live 特別提示：本人博客部分有參考網絡其他博客，但均是本人親手編寫過並驗證通過。如發現博客有錯誤，請及時提出以免誤導其他人，謝謝！歡迎轉載，但記得標明文章出處：http://www.cnb

【JavaScript】計數器+classList使用-純js案例：全選反選

nta ava count 改變 markdown 精簡 javascrip 案例 標簽 這兩天做了一個全選反選的案例，用了幾種方法，剛開始寫的磕磕絆絆，聽老師講解後理清思路，再來寫就很容易了。其實還是寫代碼時候的思路問題。首先要分析功能，然後分步實現，不要攪在一起。下面幾

【轉】四款經典3.7v鋰電池充電電路圖詳解

大小 來源 輸入 控制 電路原理圖 cfa and 繼續 lan 3.7v鋰電池充電電路圖（一） 1、鋰電池的充電： 根據鋰電池的結構特性，最高充電終止電壓應為4.2V，不能過充，否則會因正極的鋰離子拿走太多，而使電池報廢。其充放電要求較高，可采用專用的恒流、恒壓充電器進行

【前端】20款國外非常漂亮的優秀網站404錯誤頁面HTML模板

html模板 lin 設計師 響應 ack 技術 模板頁 漂亮 代碼 404錯誤頁面是一個非常普遍的現象，該頁面的目的是告訴瀏覽者其所請求的頁面不存在或鏈接錯誤，同時引導用戶使用網站其他頁面而不是關閉窗口離開。雖然404錯誤頁面在所難免，但網頁設計師們卻可以在該頁面上做一些

【Python】不用numpy用純python求極差、平均數、中位數、眾數與方差，python的列印到控制檯

原文連結：https://blog.csdn.net/yongh701/article/details/50150619 python作為資料分析的利器，求極差、平均數、中位數、眾數與方差是很常用的，然而，在python進行統計往往要使用外部的python庫numpy，這個庫不難裝，然而，如果單

【LeetCode】8. 字串轉整數 (atoi)

題目連結：https://leetcode-cn.com/problems/string-to-integer-atoi/description/ 題目描述 實現 atoi，將字串轉為整數。 該函式首先根據需要丟棄任意多的空格字元，直到找到第一個非空格字元為止。如果第一個非空

【LeetCode】8. String to Integer (atoi) - Java實現

文章目錄 1. 題目描述： 2. 思路分析： 3. Java程式碼： 1. 題目描述： Implement atoi which converts a string to an integer. The function fir

【LeetCode】#8字串轉換整數(String to Integer)

【LeetCode】#8字串轉換整數(String to Integer) 題目描述 請你來實現一個 atoi 函式，使其能將字串轉換成整數。 首先，該函式會根據需要丟棄無用的開頭空格字元，直到尋找到第一個非空格的字元為止。 當我們尋找到的第一個非空字元為正或者負號時，則將該符號與之

【leetcode】8. String to Integer (atoi)(從string中按照規則提取int)

Implement atoi which converts a string to an integer. The function first discards as many whitespace characters as necessary until

【SpringMVC】8.REST風格的CRUD實戰（二）之查詢操作

##注意！！！ URI：emps 請求方式：GET 顯示效果 所以我們就圍繞這個需求來進行程式設計。 ##二、具體步驟 ###1.把Handler方法寫好 EmployeeHandler相關程式碼 package com.springmvc.cru

【OpenCV】8鄰域種子填充法剔除短連通域的高效演算法

//本文件參考種子填充演算法描述及C++程式碼實現(https://www.bbsmax.com/A/amd0AVWzge/)講解的原理，實現快速種子填充演算法，執行效果高。 //具體功能如下：依次掃描每個畫素，檢測8領域，尋找連通域，刪掉面積小於閾值的。 #define IMG_MARGIN

【181118】一款VC++影象開場載入效果（漸入，馬賽克，滑入）原始碼

一款VC++影象開場載入效果，向大家演示了幾種影象裝載的特效實現的方法，比如掃描顯示、滑動顯示、漸入顯示和馬賽克顯示等，大家在使用一些幻燈片軟體的時候，經學會看到類似的效果，如果你有一定的VC++基礎，

【譯】8. Java反射——註解

 =====================================================================================      使用Java反射機制，在執行時你可以訪問到Java類中所附屬的一些註解。下面是本文所涵蓋的主題列表： What

【推薦】四款資料庫視覺化操作工具

後端開發，離不開資料庫，管理資料庫肯定會用到視覺化介面，相信大家使用到的視覺化工具也有很多，我這裡推薦自己經常使用到的四款資料庫視覺化操作工具，主要是用於MySQL視覺化，但不侷限於MySQL。 按照圖片中的推薦順序來一一講解，該順序主要是按照自己的使用習

【 專欄 】- WijmoJS 新一代純前端控制元件集入門指南

WijmoJS 新一代純前端控制元件集入門指南 “快如閃電，觸控優先”，在提供優質服務和產品的同時，專注於企業應用開發，不斷優化產品架構，與時俱進。除在全球率先支援 AngularJS 外，現已全面應用於 React、Vuejs、

【Arduino】8位LED數碼管(3461BS)

淘寶買了一塊3461BS的8位LED數碼管，寶貝一到就迫不急待的想試試，結果一看文件，好傢伙沒有Arduino的測試程式。莫急~莫急~反正是串列埠操作，大不了瞎蒙唄！ 以下兩點是瞎蒙過程中比較有趣的兩點： 1、需要了解什麼是“上升沿”、“下降沿”，否則看參考程式碼（文件只

【Netty】(8）---ChannelPipeline概念理解

ChannelPipeline      ChannelPipeline不是單獨存在,它肯定會和Channel、ChannelHandler、ChannelHandlerContext關聯在一起,所以有關概念這裡一起講。 一、ChannelHandler   1、

【LeetCode】【Python】8. String to Integer (atoi)

題目 Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input

【轉載】6款漂亮HTML CSS樣式使用者留言表單

.dark-matter { margin-left: auto; margin-right: auto; max-width: 500px; background: #555; padding: 20px 30px 20px 30px; font: 12px "Helvetica Neue"