![](/img/trans.png)
[英]contact field make date selector appear when anywhere in field is clicked
[英]Image Change when Contact Form Field Clicked
我目前在我的網站上有一個聯系表單,當單擊該表單時,它會以橙色突出顯示邊框。
目前,字段中的圖標是灰色的(請參閱此處以獲取打印屏幕: http : //i47.tinypic.com/2d6mvwp.jpg ),我正在嘗試獲取它,以便在單擊字段時單擊圖像從灰色版本更改為橙色版本。 因此,實際上,取決於單擊哪一個,字段圖標和邊框會同時突出顯示。
我希望這對於某人來說簡直太簡單了,我認為主要困擾的是圖像是通過CSS引用的
表單的HTML部分在這里:
<form method="post" action="contactengine.php">
<label for="Name"></label>
<input type="text" placeholder="Name" name="Name" id="Name"
<label for="Email"></label>
<input type="text" placeholder="E-mail" name="Email" id="Email" />
<label for="Message"></label><br />
<textarea name="Message" placeholder="Enter your message here..." rows="20" cols="20"></textarea>
<input type="image" name="submit" value="" src="Button_Static.png" onmouseover="this.src='Button_Hover.png'" onmouseout="this.src='Button_Static.png'" class="submit-button"/>
</form>
和名稱和電子郵件字段后面的CSS在這里(抱歉,代碼塊使我無法正確插入此代碼):
#Name{
background-image: url(NameIcon.png);
background-repeat: no-repeat;
background-size:32px 24px;
background-position-x: 10px;
background-position-y: 40%;
padding: 5px;
height: 30px;
width: 350px;
font-family: Helvetica, sans-serif;
font-size: .8em;
margin: 0px 0px 10px 0px;
border: 2pt solid #ccc;
text-indent: 50px;
/* Curved Boxes - Browser Compatability */
-moz-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#Email {
background-image: url(EmailIcon.png);
background-repeat: no-repeat;
background-size:30px 17px;
background-position-x: 12px;
background-position-y: 40%;
padding: 5px;
height: 30px;
width: 350px;
font-family: Helvetica, sans-serif;
font-size: .8em;
margin: 0px 0px 10px 0px;
border: 2pt solid #ccc;
text-indent: 50px;
/*Curved text Boxes - Browser Compatability*/
-moz-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-top-right-radius: 8px;
border-top-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-border-bottom-right-radius: 8px;
border-bottom-right-radius: 8px;
}
使用另一種CSS樣式,並使用:focus將應用於具有焦點的輸入元素。 只需將其中的圖像和邊框更改為橙色的:
#Name:focus{
background-image: url(OrangeIcon.png);
border: 1px solid orange
}
您要做的是,觸發javascript的字段具有onclick或onfocus事件,該javascript更新了背景圖片屬性
document.getElementById("email").style.backgroundImage = "url(EmailIconSelected.png)";
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.