這篇文章將為大家詳細(xì)講解有關(guān)css搜索框如何實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

建網(wǎng)站原本是網(wǎng)站策劃師、網(wǎng)絡(luò)程序員、網(wǎng)頁(yè)設(shè)計(jì)師等，應(yīng)用各種網(wǎng)絡(luò)程序開發(fā)技術(shù)和網(wǎng)頁(yè)設(shè)計(jì)技術(shù)配合操作的協(xié)同工作。成都創(chuàng)新互聯(lián)公司專業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站制作(企業(yè)站、響應(yīng)式網(wǎng)站建設(shè)、電商門戶網(wǎng)站)等服務(wù),從網(wǎng)站深度策劃、搜索引擎友好度優(yōu)化到用戶體驗(yàn)的提升,我們力求做到極致!

css實(shí)現(xiàn)搜索框的方法：首先組織頁(yè)面結(jié)構(gòu)；然后使用placeholder來(lái)進(jìn)行文本框注釋；接著設(shè)置搜索按鈕；最后重置頁(yè)面的默認(rèn)外邊距與內(nèi)邊距，并設(shè)置搜索框的外邊框樣式即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

css搜索框怎么寫？

使用p+css實(shí)現(xiàn)如圖所示搜索框效果：

分析：

1.使用markman對(duì)原圖進(jìn)行寬度、高度、顏色等方面的分析，如下圖：

2.分析元素：
該搜索框主要構(gòu)成：input文本框、button按鈕、按鈕左側(cè)一個(gè)三角形的指示符號(hào)；

實(shí)現(xiàn)：

• 先組織頁(yè)面結(jié)構(gòu)：

 
   
     SEARCH
       
          
 

• 文本框,使用placeholder來(lái)進(jìn)行文本框注釋：

• 搜索按鈕：

SEARCH

• 三角形指示符號(hào)：從示例圖上看這個(gè)三角形符號(hào)是與按鈕融合的，因此我們初步確定將它做為按鈕內(nèi)部元素，使用定位的方式來(lái)實(shí)現(xiàn)

SEARCH
  

• 樣式設(shè)計(jì)：

• 先重置頁(yè)面的默認(rèn)外邊距與內(nèi)邊距：

    *{
        margin:auto;
        padding:0;
     }

• 設(shè)置類form的樣式：

 .form{
        width: 454px;
        height: 42px;
        background:rgba(0,0,0,.2);
        padding:15px;
        border:none;
        border-radius:5px;  
}

設(shè)置搜索框的外邊框樣式，設(shè)置透明度,去掉外邊框線，設(shè)置邊框弧度：

background:rgba(0,0,0,.2);
border:none;
border-radius:5px;

• 設(shè)置input輸入框的樣式：

input{
    width: 342px;
    height: 42px;
    background-color: #eeeeee;
    border:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    font-style:italic;
}

邊框弧度也可簡(jiǎn)寫成：

    border-radius:5px 0 0 5px;

設(shè)置字體樣式：

    style-style:italic

還有其他屬性值：

• 按鈕樣式：

button{
    width:112px;
    height: 42px;
    background-color:#d93c3c;
    color:#fff;
    border:none;
    border-radius:0 5px 5px 0;
    position: relative;
}

注意，這里使用了相對(duì)定位：

 position: relative;

作用是用來(lái)幫助指示三角形的位置;

• 指示三角形的樣式：

 .t{
    border-width:6px;
    border-style:solid;
    border-color: transparent #d93c3c transparent transparent;
    position: absolute;
    right:100%;
}

這個(gè)元素使用絕對(duì)定位，將其的y坐標(biāo)從右往左的參考元素的100%邊框位置上,x坐標(biāo)不設(shè)置，則默認(rèn)為0：

 position: absolute;
 right:100%;

制作三角形指示符號(hào)的步驟：

• 定義三角的span元素：

• 制作四色邊框:

 .triangle {
    display: inline-block;
    border-width: 100px;
    border-style: solid;
    border-color: #000 #f00 #0f0 #00f;
}

border-color 四個(gè)值依次表示上、右、下、左四個(gè)邊框的顏色。

• 需要哪個(gè)方向的三角形，就將其他3個(gè)三角形設(shè)為透明即可

border-color: #000 transparent transparent transparent;

不使用span，使用偽類直接定位三角形的位置，則在刪除掉三角形的span元素和樣式，直接在按鈕元素的樣式上增加before，完整代碼如下：

    
    
    



    
          
            SEARCH        
    

     

關(guān)于“css搜索框如何實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。