Entrar Ainda não tem acesso?
1
resposta

Alinhamento dos elementos

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Cálculos com CSS e atividade Ícones nos campos do formulário

por nicecio.santos
| 113.9k xp | 10 posts
<!doctype html>
<html>
    <head>
        <title>Estilizando inputs</title>
        <meta charset="utf-8" />
        <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">

        <style type="text/css">
            @font-face {
              font-family: 'FontAwesome';
              src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
              src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
              font-weight: normal;
              font-style: normal;
            }

            div {
                position: relative;
                font-family: 'Catamaran', sans-serif;
                padding: 20px;
                border: 1px solid #000;
                margin: 0 auto;
                width: 30%;
            }

            label {
                color: #004080;
                display: block;
                text-transform: capitalize;
                font-weight: bolder;
            }

            label ~ label {
                margin-top: 15px;
            }

            label[for="nome"]::after {
                position: absolute;
                display: block;
                font-family: 'FontAwesome';
                content: "\f2c0";
                font-size: 2em;
                width: 1.48em;
                height: 1.48em;
                background-color: #004080;
                color: #99ccff;
            }

            label[for="email"]::after {
                position: absolute;
                display: block;
                font-family: 'FontAwesome';
                content: "\f1fa";
                font-size: 2em;
                width: 1.48em;
                height: 1.48em;
                background-color: #004080;
                color: #99ccff;
            }

            input {
                box-sizing: border-box;
                padding: 10px;
                width: 100%;
                font-size: 1.3em;
                border: 1px solid #004080;
                color: #004080;
                background-color: #99ccff;
                position: relative;
                left: 2em;
            }

        </style>    
    </head>

    <body>
        <div>
            <label for="nome">nome</label>
            <input id="nome" placeholder="Seu nome">
            <label for="email">e-mail</label>
            <input id="email" type="email" placeholder="seuemail@seudominio">
        </div>        
    </body>
</html>

Neste código não consigo centralizar os icones nem fazer com que os inputs se ajustem a div e ao inicio da caixa dos icones. Tentei seguir o exemplo da aula

1 resposta
por Rodrigo Braga da Silva Santos
| 151.6k xp | 15 posts
Analista de desenvolvimento

Ajustei de uma nova maneira se te ajudar a resolver.

Css:

@font-face {
              font-family: 'FontAwesome';
              src: url('./dist/fonts/fontawesome-webfont.eot?v=4.7.0');
              src: url('./dist/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('./dist/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('./dist/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('./dist/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('./dist/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
              font-weight: normal;
              font-style: normal;
            }

            .container{
                position: relative;
                font-family: 'Catamaran', sans-serif;
                padding: 20px;
                border: 1px solid #000;
                margin: 0 auto;
                width: 30%;
            }

            input{
                width:100%;
                border:#ddd solid 1px;
                float:left;
                padding:5px 25px 5px 5px;
                border: 1px solid #004080;
                color: #004080;
                background-color: #99ccff;
            }

            .icon{
               float:left;
               margin:3px 0px 0px -20px;
               cursor:pointer
            }

            .iconUser:after{
               font-family:FontAwesome;
               font-size:17px;
               content:"\f2c0";
               font-weight:600;
            }

            .iconMail:after{
               font-family:FontAwesome;
               font-size:17px;
               content:"\f1fa";
               font-weight:600;
            }
            .inputgroup{
                width:100%;
                bottom:10px;
            }

HTML:

    <div class="container">
            <div class="inputgroup">
                <label for="nome">Nome</label>
                <input type="text" />
                <div class="icon iconUser"></div>
            </div>
            <div class="inputgroup">
                <label for="nome">E-mail</label>
                <input type="text" />
                <div class="icon iconMail"></div>
            </div>
        </div>