logo标签列表

CSS - 将复选框置于最前面

htmlcss
3

我在这里找到了一个类似于我的问题的问题，但是被接受的答案没有解决我的问题。

使用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个回答
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
当我更改它时，它会显示原始复选框。我正在隐藏它们，因为我在下面创建了一个自定义的复选框。 - Christopher Littlewood
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更容易学习和实现。

当我将其更改为绝对值时，它会影响不同分辨率的不同屏幕上自定义复选框的位置。我只是在寻找一种将该元素置于前台的方法。 - Christopher Littlewood
如果您在多个页面中使用了这些复选框，请尝试使用不同的类。让我编辑我的答案以包括该情况。 - internet
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接