Entrar Ainda não tem acesso?
3
respostas

Meu codigo n escondeu a caixinha alguém poderia me ajudar ?

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Formulários e atividade Melhorando a usabilidade com truques CSS

por Onias Vieira Junior
| 213.6k xp | 8 posts

Segue meu html

</head>
<body>
    <main>
        <h1 class="titulo-principal">Contato</h1>
        <div class="container">

    <form>
                         <fieldset>
                               <legend>Dados pessoais</legend>
                               <label for="nome" >Nome:</label>
                               <input id="nome" type="text" name="nome"  placeholder="Nome sobrenome"required autofocus pattern="[A-Za-z ']{8,}"title="O nome precisa ter pelo menos 8 caracteres">
                                    <label for="email">Email:</label>
                                <input id="email" name="e-mail" placeholder="Seu@e-mail.com" type="email" required autofocus>
                         </fieldset>
                         <fieldset>
                                    <legend>Assunto</legend>
                                      <label>
                                       <input type="radio" name="assunto" value="consult" autofocus>
                                        Consultoria
                                      </label>

                                      <label>
                                        <input type="radio" name="assunto" value="blog" autofocus>
                                        Blog
                                     </label>

                                     <label>
                                        <input type="radio" name="assunto" value="Outro">
                                        Outro
                                    </label>
                          </fieldset>

                    <label for="msg">Mensagem:</label>
                    <textarea id="msg" name="mensagem" cols="30" rows="6" required autofocus></textarea>
                    <button type="submit">Enviar <strong>para mim</strong></button>


                </form>
        </div>
    </main>
    <img src="imagens/onias.jpg.jpeg" height="400px" width="400px   "alt="Minha foto" class="minha-foto">
    <aside class="navegacao-site">
        <h1>João da Silva</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="bio.html">Sobre mim</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="contato.html">Contato</a></li>
            </ul>
        </nav>
        <ul class="icones-redes-sociais">
            <li>
                <a href="https://github.com/joaodasilva" class="github" data-tooltip="Veja meus projetos opensource">
                    Github
                </a>
            </li>
            <li>
                <a href="https://twitter.com/joaodasilva" class="twitter" data-tooltip="Siga-me no Twitter">
                    Twitter
                </a>
            </li>
            <li>
                <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class="linkedin" data-tooltip="Veja meu currículo">
                    LinkedIn
                </a>
            </li>
        </ul>
    </aside>
    <footer class="rodape-pagina">
        &copy; Onias Vieira 2019
    </footer>
</body>
3 respostas
por Onias Vieira Junior
| 213.6k xp | 8 posts

Segue meu css

label {
    display: block;
}

button {
    display: block;
    position: relative;
    left: 73.4%;
    text-align: center;
    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 1em;
    font-family: "Open Sans Condensed", "Arial", sans-serif;
    font-size: 1.2em;
    border: none;
    margin-top: 1em;
}

button:hover, button:focus {
    background-color: #8C1D3D;
}

legend, form > label {
    font-weight: bold;
}

form > label {    
    padding-top: 1.5em;
}

input, textarea {
    width: 100%;
    border: 1px solid #ccc;
    padding: 0.5ch;
    font-family: inherit;
    font-size: 1em;
}

fieldset:nth-child(2) input{
    width: auto;
}

input:focus {
    background-color: #FFD;
}

input:invalid {
    box-shadow: 0 0 3px red;
}

fieldset:nth-child(2) label {
    display: inline;
}

display:input[value="outro"] ~ input {
    display: none;
}

 Display:input[value="outro"]:checked ~ input {
    display: inline;
}
por Eduardo Henrique Morais
| 72k xp | 20 posts

Olá!

Qual caixinha você está se referindo?

por Eduardo Henrique Morais
| 72k xp | 20 posts

Se for o formulário é só você adicionar uma tag no seu css.

fieldset{
border: 0;
}

se caso for para outro campo é só utilizar este atributo border.

se você precisa quando passar o mouse em cima ela sumir...

fieldset:hover{
border:0;
}