css搜索框如何實現(xiàn)

發(fā)布時間：2021-07-27 10:25:39 來源：億速云閱讀：392 作者：小新欄目：web開發(fā)

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

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

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

css搜索框怎么寫？

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

css搜索框如何實現(xiàn)

分析：

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

css搜索框如何實現(xiàn)

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

實現(xiàn)：

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

<form action="">
 <p class="form">
   <input type="text" name="uname" placeholder="Search here...">
     <button>SEARCH
       <span class="t"></span>
     </button>     
 </p>
</form>

文本框,使用placeholder來進行文本框注釋：

<input type="text" name="uname" placeholder="Search here...">

搜索按鈕：

<button>SEARCH</button>

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

<button>SEARCH
  <span class="t"></span>
</button>

樣式設(shè)計：

先重置頁面的默認外邊距與內(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;
}

邊框弧度也可簡寫成：

    border-radius:5px 0 0 5px;

設(shè)置字體樣式：

    style-style:italic

還有其他屬性值：

屬性值	描述
normal	默認值。瀏覽器顯示一個標準的字體樣式。
italic	瀏覽器會顯示一個斜體的字體樣式。
oblique	瀏覽器會顯示一個傾斜的字體樣式。
inherit	規(guī)定應該從父元素繼承字體樣式。

按鈕樣式：

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坐標不設(shè)置，則默認為0：

 position: absolute;
 right:100%;

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

定義三角的span元素：

<span class="triangle"></span>

制作四色邊框:

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

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

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

border-color: #000 transparent transparent transparent;

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 'lucida sans', 'trebuchet MS', 'Tahoma';
            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>
</head>

<body>
    <form action="">
    <p class="form">      
            <input type="text" name="uname" placeholder="Search here..."><button>SEARCH</button>        
    </p>
    </form> 
</body>
</html>

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

向AI問一下細節(jié)

css搜索框如何實現(xiàn)

分析：

實現(xiàn)：

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

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