css搜尋框怎麼寫

css實作搜尋框的方法：先組織頁面結構；然後使用placeholder來進行文字方塊註解；接著設定搜尋按鈕；最後重設頁面的預設外邊距與內邊距，並設定搜尋框的外邊框樣式即可。

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

css搜尋框怎麼寫？

使用p css實作如圖所示搜尋框效果：

分析：

分析：

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

#2.分析元素：

該搜尋框主要構成：input文字方塊、button按鈕、按鈕左側一個三角形的指示符號；
• 實作：

• 先組織頁面結構：

 

   <input>      SEARCH        <span></span>             

• 文字方塊,使用placeholder來進行文字方塊註解：

<input>

• #搜尋按鈕：

<button>SEARCH</button>

• 三角形指示符號：從範例圖上看這個三角形符號是與按鈕融合的，因此我們初步確定將它做為按鈕內部元素，使用定位的方式來實現

<button>SEARCH
  <span></span>
</button>

• 樣式設計：

先重設頁面的預設外邊距與內邊距：

•     *{
          margin:auto;
          padding:0;
       }

設定類別form的樣式：

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

設定搜尋框的外邊框樣式，設定透明度,去掉外邊框線，設定邊框弧度：

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

設定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;
}

#邊框弧度也可簡寫成：

    border-radius:5px 0 0 5px;

    style-style:italic

屬性值描述normal預設值。瀏覽器顯示一個標準的字體樣式。 italic瀏覽器會顯示一個斜體的字體樣式。 oblique瀏覽器會顯示一個傾斜的字體樣式。

設定字型樣式：	還有其他屬性值：

inherit
• 規定應該從父元素繼承字體樣式。

按鈕樣式：

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

注意，這裡使用了相對定位：

 position: relative;

作用是用來幫助指示三角形的位置;

指示三角形的樣式：

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

這個元素使用絕對定位，將其的y座標從右往左的參考元素的100 %邊框位置上,x座標不設置，則預設為0：

 position: absolute;
 right:100%;

製作三角形指示符號的步驟：

定義三角形的span元素：

<span></span>

製作四色邊框:

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

border-color 四個值依序表示上、右、下、左四個邊框的顏色。
• 【推薦學習：

css影片教學

】

##########需要哪個方向的三角形，就將其他3個三角形設為透明即可# #####

border-color: #000 transparent transparent transparent;

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

nbsp;html>


    <meta>
    <title>Document</title>
    <style>
        *{
            margin:auto;
            padding:0;
        }
        .form{
            width: 454px;
            height: 42px;
            background:rgba(0,0,0,.2);
            padding:15px;
            border:none;
            border-radius:5px;          
        }
        input{
            width: 342px;
            height: 42px;
            background-color: #eeeeee;
            border:none;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            font: bold 15px &#39;lucida sans&#39;, &#39;trebuchet MS&#39;, &#39;Tahoma&#39;;
            font-style:italic;
        }
        button{
            /*display:inline-block;*/
            width:112px;
            height: 42px;
            background-color:#d93c3c;
            color:#fff;
            border:none;
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
            position: relative;
            font-size:16px;
            font-weight: bold;
        }
        /*使用伪类来添加三角符号*/
        button:before{
            content:"";
            border-width:6px;
            border-style:solid;
            border-color: transparent #d93c3c transparent transparent;
            position: absolute;
            right:100%;
            top:38%;
        }

    </style>



    

    

                   <input><button>SEARCH</button>             

    

 

以上是css搜尋框怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！