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>
    <!-- CSS -->
    <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

Tapion

Réponse acceptée

Hello

Il suffit juste de modifier le padding de ton input

et de mettre 0 en left & right

.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 0;
    padding-right: 5px;
    margin: 8px 0;
}

Sinon pour garder le placeholder au bon endroit tu modifies ça taille

.normal-signup input {
    width: 95%;
    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;
}

Ekim Kael

Auteur

@Flay0r Merci.

Champs de saisie

2 réponses