在WEB開發過程中，資訊錄入介面中，經常會有一個特殊的輸入元素，如：必要欄位、日期選擇欄位、在快顯視窗中選值的欄位，使用CSS來設定這些元素的外觀，可以省去一些不必要的按鈕、提示，使頁面更加簡潔。
效果如下：
實現這樣的效果，只須一張圖片：
CSS代碼很簡單：Html代碼
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
- <head>
- <title>隔壁老王 - CSS技術網站</title>
- </head>
- <style type="text/css">
- .input1,.input2,.input3{
- padding:0;
- height:15px;
- line-height:15px;
- border:1px solid #ABAFFB;
- background:url(inputbk.gif) no-repeat right 0;
- width:300px;
- }
- .input2{
- background-position:right -15px;
- }
- .input3{
- background-position:right -30px;
- background-repeat:repeat-x;
- }
- </style>
- <body>
- <h2>靈活使用CSS，控制input元素的外觀，<br/>可以省去一些不必要的按鈕、提示。</h2>
- <input class="input3" value="靈活使用CSS，必要欄位"/></br></br>
- <input class="input1" value="wallimn"/></br></br>
- <input class="input2" value="http://wallimn.iteye.com"/>
- </body>
- </html>
