Forum Alsacréations - formulaire sous Chrome

1ères modifications

by PhilippeVay

HTML

<div id="contact-form">
    
<form method="post" action="sent.php">
    <p>
        <label for="nom">Nom</label>
        <input class="input" type="text" name="nom" id="nom" />
    </p>
    <p>
        <label for="telephone">Numéro de téléphone</label>
        <input class="input" type="text" name="telephone" id="telephone" />
    </p> 
    <p>
        <label for="mail">Adresse e-mail</label>
        <input class="input" type="text" name="mail" id="mail" />
    </p> 
    <p>
        <label for="message">Message</label>
        <textarea name="message" id="message"></textarea>
    </p> 
    <p>
        <input class="bouton" type="submit" value="Envoyer" />
    </p>
</form>
 
</div>

CSS

#contact-form, #contact-infos { 
     display: inline-block; 
     width: 400px; 
     min-height: 480px; 
     vertical-align: top;
    outline: 1px dotted red;
 }
 
form p {
    margin: 0;
}

 .input, textarea { 
    display: block; 
    width: 390px;
    padding: 3px 5px 3px 5px;
    /* jamais de height ou presque. On laisse le texte occuper la place qu'il souhaite occuper et on ajoute du padding pour que la hauteur fasse 25px */
    background: #77B900;
    border: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    resize: none;
    margin-bottom: 5px;
    font-family: Designosaur;
    font-size: 1em;
    behavior: url('PIE.htc');
 }
 
 .bouton {
    margin-top: 5px;
    float: right;
    background: #77B900;
    color: black;
    padding: 5px;
    font-weight: bold;
    text-transform: uppercase;
    border: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-family: Designosaur;
    width: 100px;
    behavior: url('PIE.htc');
 }
 
 .bouton:hover {
     background: #272727;
     color: #77B900;
     cursor: pointer;
 }

JavaScript

/*

http://forum.alsacreations.com/topic-4-61039-1-Decalage-inputtypequotsubmitquot-de-quelques-pixels-sous-Chrome.html

Ajout de paragraphes pour séparer chaque ensemble étiquette+champ
Suppression de height pour min-height (blocs) ou du padding (texte)

*/