css實現網頁標準搜索框

天給大家帶來一種標準化的橢圓形的搜索框，話不多說，直接放圖。

我相信大家在很多網頁上一定見過這種搜索框，那么這種搜索框到底是怎么做的呢？不要著急，聽我慢慢給您講來。

我們會用到<input>標簽來構建最基本的搜索框架構，用到<a>標簽實現后面的搜全網的搜索按鈕。
具體的html的代碼很簡單。

<form class="message"><input type="text" name="sousuo" class="input" placeholder="冬瓜搜索"/> </form> <a href="#" class="search">搜全網</a>

3. 下來就是用css來美化它了。這里我們會用到boder元素。

4. 話不多說直接放代碼。

.message{position:absolute; left: 600px;top: 16px;} .input{width: 300px;height: 50px;font-size: 15px;padding-left: 20px;border: 1px solid #DCDCDC;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #F5F5F5;}.input:focus{border-color: #FA8072;outline: none;color: #FA8072; }.search{position:absolute; left: 900px;top: 15.5px;width: 90px;height: 49.3px;border: 1px solid #DCDCDC;border-top-right-radius: 25px;border-bottom-right-radius: 25px;font-size: 16px;text-align: center;line-height: 48px;color: #FFFFFF;background-color: #FA8072;text-decoration: none;}.search:hover{background-color: #F08080;}

5. 在css代碼中有一個關鍵的屬性，那就是border-top-left-radius和border-bottom-right-radius以及其他的相反方向。

小伙伴們看明白了嗎？快去動手試試吧。

文為大家介紹如何使用 CSS 創建一個帶搜索的導航欄。

以下實例均是響應式的。

可以先看下效果圖：

創建一個搜索欄

HTML 代碼

</div>

CSS 代碼

/* 在頂部導航欄中添加黑色背景顏色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間）

在線咨詢

上一篇：瀏覽器未安裝flash插件提示實現代碼
下一篇：網站開啟灰色色調，4月4日全國哀悼！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。