Html - with two inputs on a form, how can I put CSS in the second input?

RicardoAugusto
December 30, 2023
163 views
2 votes
3 Answers

I created a form to subscribe to a news-letter on my site. So, I have two inputs: one for the email, and the other a check-box.

I want to do CSS in the checkbox, but I don’t know how. I left the HTML, the CSS, and a picture:

.info_section .info_form form input {
  outline: none;
  width: 100%;
  padding: 5px 10px;
}

.info_section .info_form form button {
  padding: 8px 35px;
  outline: none;
  border: none;
  color: #ffffff;
  background: #171717;
  margin-top: 15px;
  text-transform: uppercase;
}

.info_section .info_form form button:disabled {
  padding: 8px 35px;
  outline: none;
  border: none;
  color: #ffffff;
  background: #888888;
  margin-top: 15px;
  text-transform: uppercase;
}

.info_section .info_form form input .checkbox {
  padding: 8px 35px;
  position: relative;
  left: -50px;
}

<form name="submit-to-google-sheet">
  <input type="email" name="Email" placeholder="Introduza o seu E-mail" required>
  <button type="submit" id="register" disabled>Subscrever</button>
  <input class="checkbox" type="checkbox" id="agree" onclick="checkMe()" />Aceito a <a href="Privacidade.html"> Politica de Recolha, processamento e uso de dados pessoais do utilizador.</a>
</form>
<span id="msg"></span>

My picture of the news-letter:

PS. Can you help me to put the text in line with the checkbox?

I tried to create a class to the check box like I show on code; and I tried to use the id of the checkbox in the CSS too.

Tags: css html

Answers

There css selectors. research more on nth-child.

Here is a start: https://css-tricks.com/almanac/selectors/n/nth-child/.

The easiest way is to wrap the code in a class.

HTML:

<form name="submit-to-google-sheet">
  <div class="class-name">              
   <input type="email" name="Email" placeholder="Introduza o seu E-mail" required>
   <button type="submit" id="register" disabled >Subscrever</button>
   <input class="checkbox" type="checkbox" id="agree" onclick="checkMe()"/>Aceito a <a href="Privacidade.html"> Politica de Recolha, processamento e uso de dados pessoais do utilizador.</a>
</div>
</form>
<span id="msg"></span>

CSS

.class-name input[type=checkbox]{
  // Style checkbox
}

Html:

<form name="submit-to-google-sheet">
    <input type="email" name="Email" placeholder="Introduza o seu E-mail" required>
    <button type="submit" id="register" disabled>Subscrever</button>
    <label class="container">
        <input type="checkbox" id="agree" onclick="checkMe()"/>
        <span class="checkmark"></span>
        Aceito a <a href="Privacidade.html"> Politica de Recolha, processamento e uso de dados pessoais do utilizador.</a>
    </label>
</form>
<span id="msg"></span>

css:

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 16px;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

live_link: live_Demo

I have tried to solve your problem. See this example:

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .info_section {
            background-color: #2d2d2d;
            padding: 30px;
            width: 374px;
        }

        .info_section .info_form form input[type="email"] {
            outline: none;
            width: 100%;
            padding: 5px 10px;
        }
        .info_section .info_form form button[type="submit"] {
            width: 100%;
        }

        .info_section .info_form form button {
            padding: 8px 35px;
            outline: none;
            border: none;
            color: #ffffff;
            background: #171717;
            margin-top: 15px;
            text-transform: uppercase;
        }
        .info_section .info_form .term{display: block;margin-top: 20px;color: #fff;}
        .info_section .info_form .term a{text-decoration: none;}
        .info_section .info_form form input[type="checkbox"]{
            margin-right: 5px;
        }

        .info_section .info_form form button:disabled {
            padding: 8px 35px;
            outline: none;
            border: none;
            color: #ffffff;
            background: #888888;
            margin-top: 15px;
            text-transform: uppercase;
        }

        .info_section .info_form form input .checkbox {
            padding: 8px 35px;
            position: relative;
            left: -50px;
        }

<div class="info_section">
        <div class="info_form ">
            <form name="submit-to-google-sheet">
                <input type="email" name="Email" placeholder="Introduza o seu E-mail" required>
                <button type="submit" id="register" disabled>Subscrever</button>
                <span class="term">
                    <input class="checkbox" type="checkbox" id="agree" onclick="checkMe()" />Aceito a <a
                    href="Privacidade.html"> Politica de Recolha, processamento e uso de dados pessoais do
                    utilizador.</a>
                </span>
            </form>
            <span id="msg"></span>
        </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – with two inputs on a form, how can I put CSS in the second input?

Answers