locked
How to put checkbox beside its label in spite of conflicting with CSS "input"elements style ? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2071692902 posted

    Hi all,

    I am working on a sign up form . But because of a CSS group style my checkbox messed up with its label.

    Here the checkbox and its label block of code 

    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>

    And here the CSS goup style of all input elements in the page 

    input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}

    And here the whole page code 

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
<meta name="description" content="Universal and confidential chat,<br> where you can communicate with others, privately or publicly">
            <title> Sign Up To ApplesChat</title>
    <link rel="icon" sizes="57x57" href="https://imgur.com/57AweD4" />
  <link rel=" shortcut icon"  href="https://imgur.com/57AweD4.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">


<style>
             .banner {
        width: 100%;
        height: 50px;
        background-color: navy;
    }
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
    /* style inputs and link buttons */
input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}
/* add appropriate colors to fb, twitter and google buttons */
.fb {
  background-color: #3B5998;
  color: white;
}

.twitter {
  background-color: #55ACEE;
  color: white;
}

.google {
  background-color: #dd4b39;
  color: white;
}
hr { 
  display: block;
  margin-top: 0em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: 2px;
  border-color: navy;
} 
            
           h3 {
;
text-align:center;
font-size: small;
            }

h3 span {
    display:inline-block;
    padding:0 10px;
    background:#fff;
}
h3:before {
    content:"";
    display:block;
    ;
    z-index:-1;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:#808080;

}
/* Two-column layout */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}
</style>

    </head>
<body>
     <div class=" banner">
<h2 style="font-family: Times New Roman ; text-align: center ;color: red"> ApplesChat Sign Up</h2>
</div>
      <div class="container">
    <h1>Sign Up</h1>
    <p>Sign Up with Social Media to create an account.</p>

                <div class="col">
        <a href="#" class="fb btn">
          <i class="fa fa-facebook fa-fw">
          </i> Sign Up with Facebook
         </a>
        <a href="#" class="twitter btn">
          <i class="fa fa-twitter fa-fw">
          </i> Sign Up with Twitter
        </a>
        <a href="#" class="google btn">
            <i class="fa fa-google fa-fw">
          </i> Sign Up with Googlep;
        </a>
      </div>

<br><br><br><br><br><br><br>  
                    <h3><span>Or Sign Up Manually</span></h3>

      <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
           <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>
    <p>By creating an account you agree to our <a href="AppleChat%20Privacy%20Policy.html" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
        <div class="container signin">
    <p>Already have an account? <a href="Login%20Form.html">Login</a>.</p>
  </div>     

    </div>
  </div>
</body>
</html>

    So how to align checkbox in spite of conflicting with CSS "input"elements style ?

    Saturday, February 22, 2020 6:46 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User281315223 posted

    These two elements aren't going to align because your input element has no way of aligning with your related text (due to the CSS selector only targeting the <input> element itself). One thing that you could do would be to create a wrapper for these elements to force them to be aligned:

    <div class='checkbox-wrapper'>
    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</div>

    And then adjust your CSS to explicitly not target checkbox inputs but rather your wrapper:

    input:not([type='checkbox']),
.checkbox-wrapper,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}

    You can see an example of this here.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 22, 2020 7:58 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description,as far as I think,you could adjust  the min-width and margin according to your mobile view.

    I suggest you could press F12 and click the left button which have a pattern with a mouse arrow.You could select your element in your page and adjust the style in the right "styles".

    More details,you could refer to below codes:

    <style>
        .banner {
            width: 100%;
            height: 50px;
            background-color: navy;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box
        }
        /* style inputs and link buttons */
        input:not([type='checkbox']),
        .checkbox-wrapper,
        .btn{
            width: 100%;
            min-width:200px;
            padding: 12px;
            border: none;
            border-radius: 4px;
            /*margin: 5px 0;*/
            opacity: 0.85;
            display: inline-block;
            font-size: 17px;
            line-height: 20px;
            text-decoration: none; /* remove underline from anchors */
        }
        /* add appropriate colors to fb, twitter and google buttons */
        .fb {
            background-color: #3B5998;
            color: white;
        }

        .twitter {
            background-color: #55ACEE;
            color: white;
        }

        .google {
            background-color: #dd4b39;
            color: white;
        }

        hr {
            display: block;
            margin-top: 0em;
            margin-bottom: 0.5em;
            margin-left: auto;
            margin-right: auto;
            border-style: solid;
            border-width: 2px;
            border-color: navy;
        }

        h3 {
            ;
            text-align: center;
            font-size: small;
        }

            h3 span {
                display: inline-block;
                padding: 0 10px;
                background: #fff;
                margin-top:15px;
            }

            h3:before {
                /*content: "";*/
                display: block;
               ;
                z-index: -1;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: #808080;
            }
        /* Two-column layout */
        .col {
            float: left;
            width: 50%;
            margin: auto;
            padding: 0 50px;
            margin-top: 6px;
        }

        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 25px;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }

            button:hover {
                opacity: 1;
            }

        /* Extra styles for the cancel button */
        .cancelbtn {
            padding: 14px 20px;
            background-color: #f44336;
        }

        /* Float cancel and signup buttons and add an equal width */
        .cancelbtn, .signupbtn {
            float: left;
            width: 50%;
        }

        /* Add padding to container elements */
        .container {
            padding: 16px;
        }

        /* Clear floats */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        /* Change styles for cancel button and signup button on extra small screens */
        @media screen and (max-width: 300px) {
            .cancelbtn, .signupbtn {
                width: 100%;
            }
        }
    </style>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 26, 2020 6:38 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User281315223 posted

    These two elements aren't going to align because your input element has no way of aligning with your related text (due to the CSS selector only targeting the <input> element itself). One thing that you could do would be to create a wrapper for these elements to force them to be aligned:

    <div class='checkbox-wrapper'>
    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</div>

    And then adjust your CSS to explicitly not target checkbox inputs but rather your wrapper:

    input:not([type='checkbox']),
.checkbox-wrapper,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}

    You can see an example of this here.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 22, 2020 7:58 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2071692902 posted

    Thanks, it works!.

    But one last thing, the page wass work properly as a mobile view but after this happened the mobile view messed up . Any way to make it back as it was for mobile view?

    Thanks again

    Saturday, February 22, 2020 11:19 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description,I create a demo and it works fine.

    Could you post your current picture?Do you have other css to affect the mobile view?

    Best regards,

    Yijing Sun

    Monday, February 24, 2020 9:24 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2071692902 posted

    https://twitter.com/omanxp45/status/1231907655121350656?s=19

    Hi yij sun,

    No I don't have any extra css than I posted 

    Here an image for the view https://twitter.com/omanxp45/status/1231907655121350656?s=19

    Monday, February 24, 2020 3:56 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description and codes,I suggest you could remove the content in css of h3:before.It affect the mobile view.Besides,you could set min-width for the btn.

    More details,you could refer to below codes:

    <meta charset="utf-8" />
    <meta name="description" content="Universal and confidential chat,<br> where you can communicate with others, privately or publicly">
    <title>Sign Up To ApplesChat</title>
    <link rel="icon" sizes="57x57" href="https://imgur.com/57AweD4" />
    <link rel=" shortcut icon" href="https://imgur.com/57AweD4.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <style>
        .banner {
            width: 100%;
            height: 50px;
            background-color: navy;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box
        }
        /* style inputs and link buttons */
        input:not([type='checkbox']),
        .checkbox-wrapper,
        .btn{
            width: 100%;
            min-width:90px;
            padding: 12px;
            border: none;
            border-radius: 4px;
            margin: 5px 0;
            opacity: 0.85;
            display: inline-block;
            font-size: 17px;
            line-height: 20px;
            text-decoration: none; /* remove underline from anchors */
        }
        /* add appropriate colors to fb, twitter and google buttons */
        .fb {
            background-color: #3B5998;
            color: white;
        }

        .twitter {
            background-color: #55ACEE;
            color: white;
        }

        .google {
            background-color: #dd4b39;
            color: white;
        }

        hr {
            display: block;
            margin-top: 0em;
            margin-bottom: 0.5em;
            margin-left: auto;
            margin-right: auto;
            border-style: solid;
            border-width: 2px;
            border-color: navy;
        }

        h3 {
            ;
            text-align: center;
            font-size: small;
        }

            h3 span {
                display: inline-block;
                padding: 0 10px;
                background: #fff;
            }

            h3:before {
                /*content: "";*/
                display: block;
               ;
                z-index: -1;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: #808080;
            }
        /* Two-column layout */
        .col {
            float: left;
            width: 50%;
            margin: auto;
            padding: 0 50px;
            margin-top: 6px;
        }

        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 25px;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }

            button:hover {
                opacity: 1;
            }

        /* Extra styles for the cancel button */
        .cancelbtn {
            padding: 14px 20px;
            background-color: #f44336;
        }

        /* Float cancel and signup buttons and add an equal width */
        .cancelbtn, .signupbtn {
            float: left;
            width: 50%;
        }

        /* Add padding to container elements */
        .container {
            padding: 16px;
        }

        /* Clear floats */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        /* Change styles for cancel button and signup button on extra small screens */
        @media screen and (max-width: 300px) {
            .cancelbtn, .signupbtn {
                width: 100%;
            }
        }
    </style>




 <div class=" banner">
            <h2 style="font-family: Times New Roman; text-align: center; color: red">ApplesChat Sign Up</h2>
        </div>
        <div class="container">
            <h1>Sign Up</h1>
            <p>Sign Up with Social Media to create an account.</p>

            <div class="col">
                   <a href="#" class="fb btn">
                   <i class="fa fa-facebook fa-fw"></i>Sign Up with Facebook
                   </a>
                <a href="#" class="twitter btn">
                    <i class="fa fa-twitter fa-fw"></i>Sign Up with Twitter
                </a>
                <a href="#" class="google btn">
                    <i class="fa fa-google fa-fw"></i>Sign Up with Googlep;
                </a>
            </div>

            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <h3><span>Or Sign Up Manually</span></h3>

            <p>Please fill in this form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b></label>
            <input type="text" placeholder="Enter Email" name="email" required>

            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <label for="psw-repeat"><b>Repeat Password</b></label>
            <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
            <label>
                <input type="checkbox" checked="checked" name="remember" style="margin-bottom: 15px">
                Remember me
            </label>
            <p>By creating an account you agree to our <a href="AppleChat%20Privacy%20Policy.html" style="color: dodgerblue">Terms & Privacy</a>.</p>

            <div class="clearfix">
                <button type="button" class="cancelbtn">Cancel</button>
                <button type="submit" class="signupbtn">Sign Up</button>
                <div class="container signin">
                    <p>Already have an account? <a href="Login%20Form.html">Login</a>.</p>
                </div>

            </div>
        </div>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, February 25, 2020 8:01 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2071692902 posted

    Hi <br>
    Thanks, but I want the mobile view is like this in the image <br>
    https://twitter.com/omanxp45/status/1232220450002022406?s=19
    Tuesday, February 25, 2020 8:28 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1535942433 posted

    Hi Omanxp45-1,

    Accroding to your description,as far as I think,you could adjust  the min-width and margin according to your mobile view.

    I suggest you could press F12 and click the left button which have a pattern with a mouse arrow.You could select your element in your page and adjust the style in the right "styles".

    More details,you could refer to below codes:

    <style>
        .banner {
            width: 100%;
            height: 50px;
            background-color: navy;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        * {
            box-sizing: border-box
        }
        /* style inputs and link buttons */
        input:not([type='checkbox']),
        .checkbox-wrapper,
        .btn{
            width: 100%;
            min-width:200px;
            padding: 12px;
            border: none;
            border-radius: 4px;
            /*margin: 5px 0;*/
            opacity: 0.85;
            display: inline-block;
            font-size: 17px;
            line-height: 20px;
            text-decoration: none; /* remove underline from anchors */
        }
        /* add appropriate colors to fb, twitter and google buttons */
        .fb {
            background-color: #3B5998;
            color: white;
        }

        .twitter {
            background-color: #55ACEE;
            color: white;
        }

        .google {
            background-color: #dd4b39;
            color: white;
        }

        hr {
            display: block;
            margin-top: 0em;
            margin-bottom: 0.5em;
            margin-left: auto;
            margin-right: auto;
            border-style: solid;
            border-width: 2px;
            border-color: navy;
        }

        h3 {
            ;
            text-align: center;
            font-size: small;
        }

            h3 span {
                display: inline-block;
                padding: 0 10px;
                background: #fff;
                margin-top:15px;
            }

            h3:before {
                /*content: "";*/
                display: block;
               ;
                z-index: -1;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: #808080;
            }
        /* Two-column layout */
        .col {
            float: left;
            width: 50%;
            margin: auto;
            padding: 0 50px;
            margin-top: 6px;
        }

        hr {
            border: 1px solid #f1f1f1;
            margin-bottom: 25px;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
            opacity: 0.9;
        }

            button:hover {
                opacity: 1;
            }

        /* Extra styles for the cancel button */
        .cancelbtn {
            padding: 14px 20px;
            background-color: #f44336;
        }

        /* Float cancel and signup buttons and add an equal width */
        .cancelbtn, .signupbtn {
            float: left;
            width: 50%;
        }

        /* Add padding to container elements */
        .container {
            padding: 16px;
        }

        /* Clear floats */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        /* Change styles for cancel button and signup button on extra small screens */
        @media screen and (max-width: 300px) {
            .cancelbtn, .signupbtn {
                width: 100%;
            }
        }
    </style>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 26, 2020 6:38 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-2071692902 posted

    THanks very much. It worked.

    Wednesday, February 26, 2020 2:09 PM