1. 程式人生 > >關於<input>標簽

關於<input>標簽

插入 ear 代碼實現 hold 輸入 type rep css round

<input>標簽用於讓用戶輸入信息
今天主要講<input type="text"/>,這種類型非常多見,各大網站的搜索欄中都會出現,比如在淘寶中用戶通過它搜索想要的商品。
那麽怎麽做出一個類似淘寶的搜索框?

代碼實現:
<input type="text" placeholder="家居擺設添欣喜"/>
<button>搜索</button>

css中設置樣式:
input{
/*讓輸入框中的提示文字距離邊框一定距離,更加美觀*/
text-indent: 20px;
/*取消默認的邊框顏色*/
outline: none;
/*給邊框加上顏色,規定粗細*/
border: 2px solid #ff0000 ;
/*文本框大小*/
width: 500px;
height: 36px;
/*可以將搜索框內的小圖標作為背景圖片插入*/
/*背景圖片不平鋪,居左*/
background: url("image/search-input.png") no-repeat left;

}
/*一般文本框後面都會跟上一個搜索按鈕*/
button{
/*按鈕上的文字顏色*/
color: white;
/*按鈕的顏色*/
background-color: #ff0000 ;
border: 2px solid #ff0000 ;
height: 42px;
width: 118px;
/*文本框與按鈕間有間隙*/
/*通過設置margin為負,去掉間隙*/
margin-left: -5px;
}

得到的效果如下:

技術分享

關於<input>標簽