Stylization of CSS form

Question

Stylization of CSS form

Asked 4 years, 2 months ago

Viewed 55 times

-1

I need to leave the form in the middle of the page, without these lines that extend to the other side:

* {
  margin: 0;
  padding: 0;
}

#titulo {
  font-family: sans-serif;
  color: #380b61;
  margin-left: 7%;
}

#subtitulo {
  font-family: sans-serif;
  color: #380b61;
  margin-left: 10%;
}

fieldset {
  border: 0%;
}

body {
  background-color: white;
  font-family: sans-serif;
  font-size: 1em;
  color: #59429d;
  margin-left: 36%;
  margin-top: 2%;
  justify-content: center;
}

input,
select,
textarea,
button {
  border-radius: 5px;
}

.campo {
  margin-bottom: 1em;
}

.campo label {
  margin-bottom: 0.2em;
  color: #59429d;
  display: block;
}

fieldset.grupo .campo {
  float: left;
  margin-right: 1em;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  background: white;
}

.campo select optgroup {
  padding-right: 1em;
}

.botao {
  font-size: 1.2em;
  background: #59429d;
  border: 0;
  margin-bottom: 1em;
  color: white;
  padding: 0.2em 0.6em;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 90%;
  left: 90%;
  margin-right: -50%;
  transform: translate(-50% -50%);
}

.botao:hover {
  background: #ccbbff;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

.botao select {
  cursor: pointer;
}

#check {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./form.css/form.css">
  <title>cadastro</title>
</head>

<body>
  <div>
    <h1 id="titulo"> Cadastro de estudantes</h1>
    <p id="subtitulo"> Complete suas informações</p>
    <br>
  </div>

  <form>

    <fieldset class="grupo">
      <div>
        <label>Nome</label>
        <input type="text" name="nome" id nome>
      </div>

      <div class="campo">
        <label>Sobrenome</label>
        <input type="text" name="sobrenome" id="sobrenome">
      </div>
    </fieldset>

    <div class="campo">
      <label>Email</label>
      <input type="email" name="email" id="email">
    </div>

    <div class="campo">
      <label>Em qual série você esta?</label>
      <label>
                    <input type="radio" name="serie" value="primeiro ano" checked> primeiro ano
                </label>
      <label>
                    <input type="radio" name="serie" value="segundo ano"> Segundo ano
                </label>
      <label>
                    <input type="radio" name="serie" value="terceiro ano"> Terceiro ano 
                </label>
    </div>

    <div class="campo">
      <label>Condição</label>
      <select id="condição">
        <option selected disabled value="Selecione"></option>
        <option>Começando</option>
        <option>Cursando</option>
        <option>Ultimo ano</option>
      </select>
    </div>

    <fieldset class="grupo">
      <div class="campo">
        <label>Selecione o que mais combina com você</label>
        <input type="checkbox" id="humanas" name="humanas" value="humanas1">
        <label for="checkbox">Curioso, me dou bem com matérias de humanas, calmo(a), dedicado</label>
        <input type="checkbox" id="humanas" name="humanas" value="humanas2">
        <label for="checkbox">Dedicado(a), gosto de desafios, lido bem com pressão, sou organizado(a)</label>
      </div>
    </fieldset>

    <div class="campo">
      <br>
      <label>Conte um pouco sobre você:</label>
      <textarea row="6" style="width: 26em;" id="voce" name="sobrevoce"></textarea>
    </div>

    <button class="botao" type="submit">Concluido</button>
  </form>
</body>

</html>

update your question with HTML structure so we can help you better

– William

2021/08/09 at 21:43

1 answer

Browser other questions tagged html css form

You are not signed in. Login or sign up in order to post.

by Arnon • **391** points · Answer 1 · 2021-08-10T09:07:50+00:00

Your form was positioned to the right because inside the body, in styles, is margin-left: 36%. I recommend avoiding using percentage to set margins.

In the last field there are 2 inputs with the same id. It is important to always be aware so that this does not occur. Explanation.

I made these changes and some other small adjustments:

* {
  margin: 0;
  padding: 0;
}

#titulo,
#subtitulo {
  font-family: sans-serif;
  color: #380b61;
}

fieldset {
  border: 0%;
}

body {
  background-color: white;
  font-family: sans-serif;
  font-size: 1em;
  color: #59429d;
  justify-content: center;
  margin: 50px;
}

input,
select,
textarea,
button {
  border-radius: 5px;
}

.campo {
  margin-bottom: 1em;
}

.campo label {
  margin-bottom: 0.2em;
  color: #59429d;
  display: block;
}

fieldset.grupo .campo {
  margin: 16px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  background: white;
}

.campo select optgroup {
  padding-right: 1em;
}

.botao {
  font-size: 1.2em;
  background: #59429d;
  border: 0;
  margin-bottom: 1em;
  color: white;
  padding: 0.2em 0.6em;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  transform: translate(-50% -50%);
}

.botao:hover {
  background: #ccbbff;
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

.botao select {
  cursor: pointer;
}

#check {
  display: inline-block;
}

<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="./form.css/form.css">
  <title>Cadastro</title>
</head>

<body>
  <div>
    <h1 id="titulo"> Cadastro de estudantes</h1>
    <p id="subtitulo"> Complete suas informações</p>
    <br>
  </div>

  <form>

    <fieldset class="campo">
      <div>
        <label for="nome">Nome</label>
        <input type="text" name="nome" id="nome">
      </div>

      <div class="campo">
        <label for="sobrenome">Sobrenome</label>
        <input type="text" name="sobrenome" id="sobrenome">
      </div>

      <div class="campo">
        <label for="email">Email</label>
        <input type="email" name="email" id="email">
      </div>
    </fieldset>
    
    <div class="campo">
      <label>Em qual série você esta?</label>
      <label><input type="radio" name="serie" value="primeiro ano" checked> Primeiro ano</label>

      <label><input type="radio" name="serie" value="segundo ano"> Segundo ano</label>
      <label><input type="radio" name="serie" value="terceiro ano"> Terceiro ano</label>
    </div>

    <div class="campo">
      <label>Condição</label>
      <select id="condição">
        <option selected disabled value="Selecione"></option>
        <option>Começando</option>
        <option>Cursando</option>
        <option>Ultimo ano</option>
      </select>
    </div>

    <fieldset class="grupo">
      <div class="campo">
        <p>Selecione o que mais combina com você</p>
        <input type="checkbox" id="humanas1" name="humanas" value="humanas1">
        <label for="humanas1">Curioso, me dou bem com matérias de humanas, calmo(a), dedicado</label>
        <input type="checkbox" id="humanas2" name="humanas" value="humanas2">
        <label for="humanas2">Dedicado(a), gosto de desafios, lido bem com pressão, sou organizado(a)</label>
      </div>
    </fieldset>

    <div class="campo">
      <br>
      <label>Conte um pouco sobre você:</label>
      <textarea row="6" style="width: 26em;" id="voce" name="sobrevoce"></textarea>
    </div>

    <button class="botao" type="submit">Concluido</button>
  </form>
</body>

</html>

If you want the form even more, just increase the body margin of 50px to the desired value.