SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Probably a fairly obvious style issue regarding form inputs

    Hi there,

    I have a contact form that I am using on my site. Using the CSS below, I have successfully managed to change the background-color of the majority of the input boxes, however a few input boxes do not change from their standard yellow colour (in Firefox) to the light brown I have specified. These inputs that are not changing are 'name', 'phone' and 'e-mail'. Any ideas why they aren't? The only CSS they are using is coming from the embedded CSS below:-

    CSS:-
    Code:
    input.padding{
    margin:3px 0 3px 0;
    background:#662904;
    border:1px solid #e79347;
    font-family:Arial;
    color:#e79347;
    font-size:11px;
    padding:3px;
    }
    
    textarea.padding{
    margin:3px 0 3px 0;
    background:#662904;
    border:1px solid #e79347;
    font-family:Arial;
    color:#e79347;
    font-size:11px;
    padding:3px;
    }
    
    label{
    width:100px;
    display:inline;
    float:left;
    margin:0px;
    padding:0px;
    }
    
    legend{
    font-family:Arial;
    color:#e79347;
    font-size:14px;
    }
    
    fieldset{
    border:1px solid #e79347;
    margin:5px;
    padding:5px;
    }
    HTML:-

    Code:
    <form action="http://www.fastnet.co.uk/cgi-bin/coolmail.cgi" method="post">  
    <div>  <input type="hidden" name="recipient" value="hello@gmail.com"/>  
    <input type="hidden" name="subject" value="Web submission"/>  
    <input type="hidden" name="goto" value="thankyou.asp"/>  
    </div>  
    
    <fieldset>  
    <legend>Contact Us</legend>  
    <label for="name">Name</label>
    <input id="name" name="name" class="padding" type="text" size="20" maxlength="160" style="background:#e79347;"/><br />  <label for="address">Address</label><textarea id="address" class="padding" name="Address" rows="5" cols="30"></textarea><br />  <label for="phone">Phone Number;</label><input id="phone" class="padding" name="phone" type="text" size="20" maxlength="160"/><br />  <label for="fax">Fax</label><input id="fax" class="padding" name="fax" type="text" size="20" maxlength="160"/><br />  <label for="e-mail">Email</label><input id="e-mail" class="padding" name="e-mail" type="text" size="20" maxlength="160"/><br />  <label for="message">Message</label><textarea id="message" class="padding" name="message" rows="10" cols="30"></textarea><br />  <label for="reply">How would you like us to reply?</label><br />  <select id="reply" name="reply">  <option value="email">email</option>  <option value="phone">phone</option>  <option value="fax">fax</option>  <option value="post">post</option>  </select>  </fieldset>  <div>  <input type="submit" id="Submit" name="Submit" value="Send Message" onclick="MM_validateForm('NAME','','R','E-MAIL','','RisEmail','MESSAGE','','R');return document.MM_returnValue" />  </div></fieldset>  </form>
    Am I missing something really obvious?

    Your help is much appreciated

    Kind Regards

    James

  2. #2
    SitePoint Addict
    Join Date
    Jan 2002
    Location
    Southwest Florida
    Posts
    393
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd guess that you have the Google toolbar installed. The yellow background is the toolbar overriding your styles to indicate which fields it can autofill.

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha, never in a million years would I think it was that!

    Thanks for pointing that out!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •