自制樣式美觀的input元件（以search輸入框為例，含原始碼）
阿新 • • 發佈：2019-02-07
閱讀本文前，讀者需要有一定的html + css的技術功底。
不說廢話，先附上search輸入框的成果截圖：
分析：
1. 元件分解：分解為如下幾個部分：
1）外層：增加一個容器，如div
2）內層：
一個input輸入框
一個按鈕
2. 設定樣式：
1）容器樣式
增加border屬性，樣式程式碼：
border: solid 1px #ddd;
增加border圓角邊框，樣式程式碼：
border-radius: 5px
2）輸入框樣式
去除border樣式：
border: none
去除輪廓樣式：
outline: 0 none;
3）按鈕樣式
同樣，去除border樣式
border: none
給按鈕增加搜尋背景圖片樣式：
background-image: url("images/ico_sear.gif");
background-repeat: no-repeat;
設定display樣式為：inline
這樣分解完，相信大家就很容易理解了。
並附上完整實現程式碼：
搜尋圖片如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 自制search搜尋框元件 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> .searchBlock{ width: 110px; border:solid 1px #ddd; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; } .searchBlock span{ float: left; } .searchText{ border: none; width: 80px; margin: 2px 5px; outline: 0 none; } .searchBtn{ border: none; width: 16px; height: 16px; cursor: pointer; background-image: url("images/ico_sear.gif"); background-repeat: no-repeat; display: inline; margin: 2px 0px; } </style> </head> <body> <div class="searchBlock"> <span> <input type="text" id="search" name="search" class="searchText"> </span> <input type="button" class="searchBtn"> </div> </body> </html>
通過這樣的一個例項，我們也可以做出很多類似的元件了。