javascript - 单击联系表单字段时图像发生变化

Question

我的网站上目前有一个联系表单，单击该表单时会突出显示橙色边框。

目前字段中的图标是灰色的(请参阅此处的打印屏幕: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;
}

Answer 1

做另一种 CSS 样式并使用 :focus ，它将应用于具有焦点的输入元素。只需将其中的图像和边框更改为橙色:

#Name:focus{
    background-image: url(OrangeIcon.png);
    border: 1px solid orange
}