CSS - Bring check box to front

Question

I found a similar question to mine here but the accepted answer did not fix my issue.

Bring element to front using CSS

I have made custom check boxes and I am trying to bring them to the front. Here is my html:

<!DOCTYPE HTML>
<html>
    <head>
        <link href="stylesheet.css" rel="stylesheet" type="text/css">
        <script src="javascript.js"></script>
    </head>
    <body>
        <div id="Title">
            <img src="" alt="WifiFinder.img" id="WifiFinderImg">
            <input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
        </div>
        <div id="AccountRegistration">
            <h2>Username</h2>
            <input class="userinfo" type="text" value="Username Here"/>
            <h2>Email Address</h2>
            <input class="userinfo" type="email" value="Email Address"/>
            <h2>Date of Birth</h2>
            <input class="userinfo" type="date" value="DD/MM/YYYY"/>
            <h2>Password</h2>
            <input class="userinfo" type="password" value="Password"/>
            <h2>Retype Password</h2>
            <input class="userinfo" type="password" value="Password"/>
            <label class="container">I have Read and Accept the Terms and Conditions
                <input type="checkbox">
                <span class="checkmark"></span>
              </label>
              <label class="container">I have Read and Accept the Privacy Statement
                   <input type="checkbox">
                   <span class="checkmark"></span>
              </label>
              <input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
        </div>
    </body>

The CSS for this is as follows:

:root{
    --main-color: #0052CC;
    --secondary-color: #172B4D;
    --tertiary-color: #FFFFFF;
}

body {
    background-color: var(--tertiary-color);
    margin: 0%;
}

#Title {
    position: absolute;
    width: 100%;
    height: 30%;
    background-color: var(--main-color);
    margin: 0%;
}

#WifiFinderImg{
    position: absolute;
    height: 100%;
    width: 50%;
    left: 0%;
    bottom: 0%;
    margin: 0%;
}

/*The main content on the account registration page*/
#AccountRegistration{
    font-size: x-large;
    position: absolute;
    height: 70%;
    overflow-y: scroll;
    bottom: 0%;
    color: var(--main-color);
    width: 100%;
    text-align: center;
    border: var(--secondary-color) 1px solid;
}

/*Class to style user input feilds for account creation*/
.userinfo{
    font-size: large;
    width: 40%;
    border: 0px;
    border-bottom: 1px var(--main-color) solid;
    text-align: center;
    color: lightgrey;
}

/*Customize the label*/
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-top: 2%;
    margin-bottom: 2%;
    cursor: pointer;
    font-size: x-large;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

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

  /*Create a custom checkbox*/
.checkmark {
    position: relative;
    top: 0;
    left: 35%;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }

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

  /*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
    background-color: var(--main-color);
  }

  /*Create the checkmark*/
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

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

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

/*Class to style all content buttons*/
.buttons{
    position: relative;
    margin-left: -10%;
    margin-top: -5%;
    margin-bottom: 2%;
    top: 150%;
    left: 5%;
    font-size: x-large;
    width: 20%;
    height: 10%;
    border: 1px var(--main-color) solid;
    text-align: center;
    background-color: var(--main-color);
    color: var(--tertiary-color);
}

/*Hover action for content buttons*/
.buttons:hover{
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/*Buttons in the header*/
.Headerbuttons{
    width: 15%;
    height: 10%;
    position: absolute;
    top: 10%;
    right: 2%;
    border: 1px var(--tertiary-color) solid;
    text-align: center;
    background-color: var(--main-color);
    color: var(--tertiary-color);
}

/*Hover actions for buttons in the header*/
.Headerbuttons:hover{
    background-color: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: var(--main-color);
}

It seems to work when I change the position of the checkbox from relative to absolute, but then the problem is that they are on different parts of the page for different sized screens.

Anzil khaN · Accepted Answer · 2018-03-10T09:50:03.630

Add display: inline-block;

Here is the working Snippet

:root {
 --main-color: #0052CC;
 --secondary-color: #172B4D;
 --tertiary-color: #FFFFFF;
}
body {
 background-color: var(--tertiary-color);
 margin: 0%;
}
#Title {
 position: absolute;
 width: 100%;
 height: 30%;
 background-color: var(--main-color);
 margin: 0%;
}
#WifiFinderImg {
 position: absolute;
 height: 100%;
 width: 50%;
 left: 0%;
 bottom: 0%;
 margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration {
 font-size: x-large;
 position: absolute;
 height: 70%;
 overflow-y: scroll;
 bottom: 0%;
 color: var(--main-color);
 width: 100%;
 text-align: center;
 border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo {
 font-size: large;
 width: 40%;
 border: 0px;
 border-bottom: 1px var(--main-color) solid;
 text-align: center;
 color: lightgrey;
}
/*Customize the label*/
.container {
 display: block;
 position: relative;
 padding-left: 35px;
 margin-top: 2%;
 margin-bottom: 2%;
 cursor: pointer;
 font-size: x-large;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
 position: relative;
 opacity: 0;
 cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
 position: relative;
 top: 4px;
 left: 0;
 height: 25px;
 width: 25px;
 background-color: lightgray;
 display: inline-block; /* Added */
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
 background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
 background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
 display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid var(--tertiary-color);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons {
  position: relative;
  margin-left: -10%;
  margin-top: -5%;
  margin-bottom: 2%;
  top: 150%;
  left: 5%;
  font-size: x-large;
  width: 20%;
  height: 10%;
  border: 1px var(--main-color) solid;
  text-align: center;
  background-color: var(--main-color);
  color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover {
 background-color: var(--secondary-color);
 border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons {
  width: 15%;
  height: 10%;
  position: absolute;
  top: 10%;
  right: 2%;
  border: 1px var(--tertiary-color) solid;
  text-align: center;
  background-color: var(--main-color);
  color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover {
  background-color: var(--tertiary-color);
  border-color: var(--tertiary-color);
  color: var(--main-color);
}

<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title"> <img src="" alt="WifiFinder.img" id="WifiFinderImg">
    <input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
    <h2>Username</h2>
    <input class="userinfo" type="text" value="Username Here"/>
    <h2>Email Address</h2>
    <input class="userinfo" type="email" value="Email Address"/>
    <h2>Date of Birth</h2>
    <input class="userinfo" type="date" value="DD/MM/YYYY"/>
    <h2>Password</h2>
    <input class="userinfo" type="password" value="Password"/>
    <h2>Retype Password</h2>
    <input class="userinfo" type="password" value="Password"/>
    <label class="container">I have Read and Accept the Terms and Conditions
        <input type="checkbox">
        <span class="checkmark"></span> </label>
    <label class="container">I have Read and Accept the Privacy Statement
        <input type="checkbox">
        <span class="checkmark"></span> </label>
    <input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
</html>

When I change that, it reveals the original check boxes. I am hiding them as I create a custom one below that. — Christopher Littlewood, Mar 10 '18 at 08:33

score 0 · Answer 2 · edited Mar 10 '18 at 09:14

The problem is indeed that you've used position relative and absolute amateur-ly (throughout the code).

Since you've mentioned that the checkboxes are used at multiple places, you need to a way to apply different styles. For that, I will add another class here.

Replace this:

<span class="checkmark"></span>

and this

.checkmark {
    position: relative;
    top: 0;
    left: 35%;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }

With this:

<span class="checkmark customCheckmark"></span>

and this

.checkmark {
    position: relative;
    top: 0;
    left: 35%;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }
  .checkmark.customCheckmark {
    position: absolute;
    top: auto;
    left: auto;
    height: 25px;
    width: 25px;
    background-color: lightgray;
  }

CSS-Tricks might be able to explain this in more depth. https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Note: As a general rule of thumb, try not to use too many position relatives and absolutes, they mess up your CSS in most cases. If you're a beginner in CSS, try using Flexbox, it's much easier to learn and implement than conventional CSS.

When I change that to absolute, it messes with the position of the custom checkbox on different screens with different resolutions. I am just looking for a way to bring the element to the front. — Christopher Littlewood, Mar 10 '18 at 08:35
If you've used these checkboxes in multiple pages, try to use different classes. Let me edit my answer to include that case. — internet, Mar 10 '18 at 08:49

CSS - Bring check box to front

2 Answers2