站長資訊網
css實現(xiàn)搜索框的方法：首先組織頁面結構；然后使用placeholder來進行文本框注釋；接著設置搜索按鈕；最后重置頁面的默認外邊距與內邊距，并設置搜索框的外邊框樣式即可。
本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
css搜索框怎么寫？
使用p+css實現(xiàn)如圖所示搜索框效果：
分析：
1.使用markman對原圖進行寬度、高度、顏色等方面的分析，如下圖：
2.分析元素：
該搜索框主要構成：input文本框、button按鈕、按鈕左側一個三角形的指示符號；
實現(xiàn)：
- 先組織頁面結構：
<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>
- 三角形指示符號：從示例圖上看這個三角形符號是與按鈕融合的，因此我們初步確定將它做為按鈕內部元素，使用定位的方式來實現(xiàn)
<button>SEARCH <span class="t"></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 | 規(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坐標不設置，則默認為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 四個值依次表示上、右、下、左四個邊框的顏色。
【推薦學習：css視頻教程】
- 需要哪個方向的三角形，就將其他3個三角形設為透明即可
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>
