CSS - 将复选框置于前面

时间：2018-03-10 06:27:12

标签： html css

我在这里发现了一个类似的问题，但接受的答案并没有解决我的问题。

  

Bring element to front using CSS

我已经制作了自定义复选框，我正试图将它们带到前面。这是我的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>

CSS的内容如下：

: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);
}

当我将复选框的位置从相对位置更改为绝对位置时似乎有效，但问题是它们位于不同大小屏幕的页面的不同部分。

2 个答案:

答案 0 :(得分：1)

添加 display: inline-block;

以下是工作代码段 

: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>

答案 1 :(得分：0)

问题确实是你使用了相对位置和绝对非常业余（在整个代码中）。

由于您已经提到复选框用于多个位置，因此您需要一种方法来应用不同的样式。为此，我将在这里添加另一个类。

替换它：

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

和这个

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

有了这个：

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

和这个

.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可能能够更深入地解释这一点。 https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

注意：作为一般的经验法则，尽量不要使用太多的位置亲属和绝对值，在大多数情况下它们会搞乱你的CSS。如果你是CSS的初学者，尝试使用Flexbox，它比传统的CSS更容易学习和实现。

相关问题
最新问题