樣式輸入文本CSS

我想創建輸入文本類似下面圖片：
enter image description here
首先，我使用CSS3與像this搬弄一些幫助。由於舊的瀏覽器出現問題，我達不到CSS3。現在我編寫這樣的：樣式輸入文本CSS

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('Pictures/Input-BG.png'); 
    background-repeat: repeat-x; 

} 
    <input id="txtScrictAddress" value="Your Adress (required)" type="text" />

投入BG.png是這樣的形象：
enter image description here
和here是結果。

我切片輸入圖像嗎？
輸入有一個左邊框顏色，應該如何在CSS樣式輸入像圖像？

來源

2011-08-23 Shahin

形象好，加上'邊框：0;'禁用默認的邊框樣式。 – Kapep

@Kapap謝謝，輸入左側的陰影怎麼樣？ – Shahin

您只需要將邊框半徑和邊框設置爲無。並編輯你的圖像，讓黑暗的東西也在左側。

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
    background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/ 

    border: 0; 
}

http://jsfiddle.net/TGzng/8/

來源

2011-08-23 06:23:07 Kyle

謝謝。它似乎比我的代碼更好，但我認爲你的樣本與我放置的圖像有很小的不同。我的意思是Input左側的小陰影。 – Shahin

我使用了您提供的圖片，需要對圖片進行編輯以包含陰影的左側部分。 – Kyle

如果你想使用圖像來獲得兩端不同的東西，你至少需要2張圖片才能得到。嘗試搜索"sliding doors input css"。也許this topic on SO可以幫助你（但還有一百萬其他例子是in the web和Stackoverflow）。

來源

2011-08-23 06:20:41 oezi

謝謝。所以你的意思是我應該使用兩個圖像，一個用於左側，另一個用於背景，對嗎？ – Shahin

您需要添加邊框半徑以圓化邊緣。雖然這不會在IE8之前工作。

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border:1px solid #777; 
    border-radius:5px 
}

至於圖像切片，獲取左側陰影部分的簡單方法意味着您需要有一個非常寬的背景圖像。或者做別人推薦的推拉門。

來源

2011-08-23 06:22:52 jzm

樣式輸入文本CSS

回答

相關問題