使用CSS的表單造型

我在我的網站上創建了一個搜索功能。我想從CSS加載搜索按鈕的圖像。搜索功能起作用，但按鈕圖像不會加載 - 爲什麼不呢？使用CSS的表單造型

這是我的形式：

<form> 
<div id="form"><input value="/etn/pagetree" type="hidden" name="c" /> 
<input value="search" type="hidden" name="func" /> 
<input value="1148074" type="hidden" name="rid" /> 
<input onblur="if(value==''){value='Search'}" id="search_str" onfocus="if(value=='Search'){value='';}" value="Search" name="search_str" type="text" /><input id="search_btn" value=" " type="submit" name="Submit" /></div> 
</form>

這是我的CSS：

FORM { margin:0px; } 

A, A:visited, A:hover { text-decoration:none; } 

.subpages_box A, .subpages_box A:visited, .subpages_box A:hover { color:#ab0019; font-size:13px; font-weight:bold; } 

.footer_area A, .footer_area A:visited, .footer_area A:hover { color:#fec80c; } 

a.sitemenu, a.sitemenu:visited { font-size:14px; color:#fff; padding:2 5 3 5; margin:2; line-height:170%; } 
a.sitemenu:hover { background-color:transparent;} 
#sitemenulit{ background-color:transparent; } 

.map_box A, .map_box A:visited { color:#AB0019; } 
.Xmap_box A:hover { color:#000; } 

.lineOdd { 
    BACKGROUND-COLOR: #e8e8e8 
} 
.lineEven { 
    BACKGROUND-COLOR: #e8e8e8 
} 
.dropmenu A { 
    PADDING-BOTTOM: 2px; PADDING-LEFT: 20px; PADDING-RIGHT: 10px; COLOR: #443f3f; PADDING-TOP: 2px 
} 
.dropmenu A:visited { 
    PADDING-BOTTOM: 2px; PADDING-LEFT: 20px; PADDING-RIGHT: 10px; COLOR: #443f3f; PADDING-TOP: 2px 
} 
.dropmenu A:hover { 
    BACKGROUND-COLOR: #901a6c; COLOR: #fff; TEXT-DECORATION: none 
} 


TABLE.search_box { 
    WIDTH: 130px; MARGIN:8 50 0 0; float:right; 
} 
TABLE.search_box TD { 
    TEXT-ALIGN: left; FONT-SIZE: 90% 
} 
TABLE.search_box #search_str { 
    WIDTH: 94px; 
    height: 21px; 
    background: url(/wbn/slot/u3252/style/extbox.png) no-repeat; 
    border: 0px solid transparent; 
    padding: 3 2 0 5; font-size:11px; 
} 
TABLE.search_box #search_btn { 
    WIDTH: 28px; 
    height: 21px; 
    background: url(/wbn/slot/u3252/style/btn.png) no-repeat; 
    border: 0px solid transparent; 
    cursor: pointer; 
} 

INPUT { margin:0px } 

.content_area OL { margin:0px; padding-left:10px }

新編輯的代碼

<table border="1"> 
<tbody> 
<tr> 
<td><form> 
<div id="header"><input value="/etn/pagetree" type="hidden" name="c" /> <input value="search" type="hidden" name="func" /> <input value="1148074" type="hidden" name="rid" /> <input onblur="if(value==''){value='Search'}" id="search_str" onfocus="if(value=='Search'){value='';}" value="Search" name="search_str" type="text" /><input id="search_btn" value=" " type="submit" name="Submit" /></div> 
</form></td> 
</tr> 
</tbody> 
</table>

來源

2013-01-19 user1992100

你只是試圖爲你的搜索字段和按鈕設計風格嗎？我理解你的問題嗎？ – Dyn

是的，我試圖給我的搜索字段和按鈕設置樣式 – user1992100

檢查圖片的路徑，看起來像是一條奇怪而漫長的道路。另外，在圖片路徑前後使用引號：background：url（「/ wbn/slot/u3252/style/btn.png」）no-repeat; – Dyn

試試這個

input#search_str { 
    WIDTH: 94px; 
    height: 21px; 
    background: url(/wbn/slot/u3252/style/extbox.png) no-repeat; 
    border: 0px solid transparent; 
    padding: 3 2 0 5; font-size:11px; 
} 
input#search_btn { 
    WIDTH: 28px; 
    height: 21px; 
    background: url(/wbn/slot/u3252/style/btn.png) no-repeat; 
    border: 0px solid transparent; 
    cursor: pointer; 
}

看看你的元素是如何嵌套的，在div，class或id中。你的CSS定義有問題。用自動化工具建立一個網站並不夠好，然後在這裏尋找答案，你必須瞭解你在做什麼......

來源

2013-01-19 03:15:14 Dyn

嗨Dyn，謝謝你的建議和解決方案，它現在的作品，非常感謝。 – user1992100

請將問題設置爲已回答！ – Dyn

使用CSS的表單造型

回答

相關問題