自定義使用圖片的形式輸入不正確顯示

我試圖創建一個自定義表單輸入，利用一些圖片，它應該是這樣的： enter image description here 自定義使用圖片的形式輸入不正確顯示

我已經試過如下：

<style> 
input { 
    background-image: url(../img/search-background-middle.png); 
    background-repeat: repeat-x; 
    padding: 17px 0; 
    font-size: 12px; 
    border: none; 
    margin: 0; 
} 

form { 
    padding: 0; 
    margin: 0; 
} 
</style> 

<body> 
<form> 
    <img src="../img/search-background-left.png"/> 
    <input type="text" value=" start typing to search..." size="40" maxlength="255"   /> 
    <img src="../img/search-background-right.png"/> 
</form> 
</body>

導致：

enter image description here