28111 sujets

CSS et mise en forme, CSS3

Bonsoir, j'ai un formulaire simple avec 3 lignes.
1 élément par ligne sur les deux première (input type text et input type button) et deux sur la dernière. (input type file et type submit)
Pour que chaque élément soit sur sa ligne respective je les ai séparés en div dans mon html.
Cependant dans mon css, j'ai un espace qui se crée au dessus de mon input file. Alors qu'il n'y a aucun margin-top, aucun padding et aucun border.

J'ai mis la dernière div en background gris pour mettre en évidence l'espace qui se crée.

http://prntscr.com/n0pkzs

       <form class="formsound">
          <div>
          <input class="soundtext" type="text" placeholder="test">
          </div>
          <div>
          <input class="soundrec" type="button">
          </div>
          <div class="test">
          <input class="soundfile" type="file">
          <input class="soundsend" type="submit" value="Poster">
          </div>
        </form>

.formsound input {
    margin-left: 30px;
    margin-bottom: 15px;
    outline: none;
}

.soundtext {
    width: 600px;
    padding: 10px 30px 0 0;
    background: none;
    border: none;
}

.soundrec {
    width: 40px;
    height: 40px;
    background: none;
    border: 3px solid rgba(var(--primary), 1);
    border-radius: 25px;
}

.soundrec:focus {
    transform: scale(0.9);
    transition: transform 0.5s ease;
}

.test {
    background: grey;
}

.soundfile {
    height: 35px;
    width: 35px;
    padding: 0;
    background: green;
    border-radius: 25px;
}

.formsound .soundsend {
    height: 35px;
    width: 100px;
    /*margin-left: 300px;*/
    padding: 0;
    background: rgba(var(--secondary), 0.8);
    border: none;
    border-radius: 20px;
    color: white;
    font-weight: 500;
}


Merci beaucoup et bonne soirée Smiley smile
Sur Firefox, pas d'espace mais sur Chrome, en effet, un espace apparaît au-dessus de l'input type file. Donc sans doute un style du navigateur sur l'input type file.
yiujia a écrit :
Sur Firefox, pas d'espace mais sur Chrome, en effet, un espace apparaît au-dessus de l'input type file. Donc sans doute un style du navigateur sur l'input type file.

Yes je comprend merci beaucoup.
Donc faudrait mieux que je mette un input button que je modifierai avec un autre langage pour lui attribuer la même action ou existe-il une propriété pour annuler les styles ?
mattzeub a écrit :
Donc faudrait mieux que je mette un input button que je modifierai avec un autre langage pour lui attribuer la même action ou existe-il une propriété pour annuler les styles ?

Oui, il faut faire une harmonisation des styles via CSS pour mettre tout les navigateurs d'accord. Les éléments de formulaires sont les plus compliqués à initialiser, vous pouvez vous inspirer d'un Normalize CSS ou encore de l'alternative développée par Bootstrap, en particulier ces lignes : Reboot.css.
sur tes 2 inputs côte à côte :
display:inline-block;
vertical-align:top;

et éventuellement leur mettre une même hauteur