Forum : Champs de saisie

Bonjour,

Voila je rencontre un petit problème avec mon code.
Mon fichier HTML

<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> <title>Creer un compte | Kadoo.</title>  <link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link media="screen,projection" rel="stylesheet" type="text/css" href="css/animate.css"> <link media="screen,projection" rel="stylesheet" type="text/css" href="css/signin.css"> </head> <body> <div class="signup-form"> <img src="images/pp.jpg" alt=""> <p>Create your free account</p> <div class="wrapper"> <div class="social-signup"> <span>Signup with : </span> <a href="#" id="google">Google</a> <a href="#" id="git">Github</a> </div> <div class="normal-signup"> <form method="post"> <input type="email" placeholder="Email adress"> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <input type="checkbox"><span>Accept <a href="#">terms and conditions</a></span> <button type="submit">Sign Up</button> </form> </div> </div> </div> </body> </html>

Mon fichier CSS

html, body { padding: 0; margin: 0; background-color: #f8faf9; font-family: roboto; } a { text-decoration: none; color: #00a2ff; } .signup-form { height: auto; width: 50vw; border-radius: 2px; background-color: #fff; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .10); display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 8% auto; padding: 10px; } .signup-form img { border-radius: 50%; width: 50px; height: 50px; } .signup-form p { font-weight: 700; font-size: 18px; } .signup-form .wrapper { display: flex; flex-direction: row; padding: 0; margin: 0; } .signup-form .wrapper>div { width: 50%; } .social-signup, .normal-signup { padding: 30px 25px; display: flex; flex-direction: column; justify-content: center; } .wrapper .social-signup >* { padding: 5px 10px; display: block; text-transform: uppercase; text-align: center; } .wrapper .social-signup span { font-size: 10px; color: #c7cfd1; } .wrapper .social-signup a { border: 1px solid rgba(0, 0, 0, .10); border-radius: 2px; margin: 6px 0; padding: 8px 0; color: #fff; } #google { background-color: #dc4e42; } #git { background-color: #4283c5; } /*-----Form-----*/ .normal-signup { border-left: 1px solid rgba(0, 0, 0, .10); position: relative; } .normal-signup input { width: 100%; border: 1px solid #00a2ff; border-radius: 2px; color: #00a2ff; background-color: rgba(0, 162, 255, 0.1); font-size: 14px; padding: 10px 10px; padding-right: 5px; margin: 8px 0; } .normal-signup button { width: 100%; border: 1px solid #00a2ff; border-radius: 2px; color: #00a2ff; background-color: rgba(0, 162, 255, 0.1); font-size: 14px; padding: 10px 10px; padding-right: 5px; margin: 8px 0; } .normal-signup button { background-color: #00a2ff; color: #fff; text-transform: uppercase; cursor: pointer; } .normal-signup input[type=checkbox] { margin: 0; padding: 0; width: auto; display: block; border-color: #00a2ff; }

Je voudrais que les inputs aient le même comportement que les boutons.en d'autres termes qu'ils ne prennent pas toute la largueur comme c'est le cas maintenant

Champs de saisie

2 réponses