Question

我创建了这个表单，它适用于Fire Fox，Safari，Opera和Chrome，但是在Edge和I.E.有一些问题，表格项目的背景在鼠标指针离开后会发生变化，并且变成深绿色，这是我在CSS中无法找到的颜色。有时只有部分人说textarea会改变颜色，这让我不知道如何发生这种情况。

我已经包含了下面的代码，它正在使用Bootstrap v3.3.1和jQuery v1.11.2。

HTML：

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="sr-only" for="field-name">Name</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-name"></div></div>
                                <input id="field-name" name="name" class="form-control" type="text" placeholder="Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="field-company">Company</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-company"></div></div>
                                <input id="field-company" name="company" class="form-control" type="text" placeholder="Company">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="field-address">Address</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-address"></div></div>
                                <input id="field-address" name="address" class="form-control" type="text" placeholder="Address">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="field-telephone">Telephone</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-telephone"></div></div>
                                <input id="field-telephone" name="telephone" class="form-control" type="text" placeholder="Telephone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="field-email">Email</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-email"></div></div>
                                <input id="field-email" name="email" class="form-control" type="text" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="field-website">Website</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-website"></div></div>
                                <input id="field-website" name="website" class="form-control" type="text" placeholder="Website">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="sr-only" for="field-message">Message</label>
                            <div class="input-group">
                                <div class="input-group-addon"><div class="icn icn-message"></div></div>
                                <textarea id="field-message" name="message" class="form-control" placeholder="Message"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="form-contact-submit" class="btn" name="submit" type="submit" value="SUBMIT" />
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="information">
                            <div class="info-title">Send Us A Message</div>
                            <div class="info-text">{{common.send_message_text|safe}}</div>
                            <address>{{common.company}} {{common.address}}</address>
                            <div class="methods">
                                <p>Tel. {{common.telephone_disp}}<br />
                                Email. {{common.email}}<br />
                                {{common.registration}}</p>
                            </div>
                        </div>
                    </div>                      
                </div>

CSS：

.contact .form-control:focus {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(108, 123, 61, 0.6);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(108, 123, 61, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(108, 123, 61, 0.6);
}
.contact .form-group {
    padding-bottom: 5px;
}
.contact .form-group .input-group-addon {
    padding: 0;
    border: none;
    line-height: 0;
    vertical-align: top;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #fff;
}
.contact .form-group .icn {
    display: inline-block;
    width: 59px;
    height: 59px;
    background-position: 0 0;
}
.contact .form-group input,
.contact .form-group textarea {
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.contact .form-group input {
    height: 59px;
}
.contact .form-group textarea {
    padding-top: 20px;
    height: 375px;
}
.contact .form-group .icn-name {
    background-image: url('../img/form_name_m.png');
}
.contact .form-group .icn-company {
    background-image: url('../img/form_company_m.png');
}
.contact .form-group .icn-address {
    background-image: url('../img/form_address_m.png');
}
.contact .form-group .icn-telephone {
    background-image: url('../img/form_telephone_m.png');
}
.contact .form-group .icn-address {
    background-image: url('../img/form_address_m.png');
}
.contact .form-group .icn-email {
    background-image: url('../img/form_email_m.png');
}
.contact .form-group .icn-website {
    background-image: url('../img/form_website_m.png');
}
.contact .form-group .icn-message {
    background-image: url('../img/form_message_m.png');
}
.contact .form-group input[type='submit'] {
    padding: 20px 65px;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    background-color: #81be41;
    color: #fff;
    -webkit-transition: background-color 0.5s ease;
    /* Firefox */
    -moz-transition: background-color 0.5s ease;
    /* WebKit */
    -o-transition: background-color 0.5s ease;
    /* Opera */
    transition: background-color 0.5s ease;
    /* Standard */
}
.contact .form-group input[type='submit']:hover {
    text-decoration: none;
    background-color: #92cf52;
}

IE Twitter Bootstrap input-group-addon问题

0 个答案: