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.
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>
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.
Related
This question already has an answer here:
How do I make :after box same size as parent and responsive? transform: scale(1) works, but why?
(1 answer)
Closed 2 years ago.
I have created a simple responsive login form. That allows the user to log-in and reset password. When filling out the username/password fields, both of these fields are mixed together and not on seperate lines. I have checked to see if the CSS layout was correct but I cannot seem to find a reason as to why the username and password fields do this.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(backgroundTwo.jpg) no-repeat center;
background-size: cover;
font-family: sans-serif;
}
.login {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.form {
position: relative;
width: 100%;
max-width: 380px;
padding: 80px 40px 40px;
background: rgba(0, 0, 0, 0.7);
border-radius: 10px;
color: #fff;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 10px;
pointer-events: none;
}
.form img {
position: absolute;
top: -50px;
left: calc(50% - 50px);
width: 100px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
}
.form h2 {
text-align: center;
letter-spacing: 1px;
margin-bottom: 2rem;
color: #ff652f;
}
.form .input input {
width: 100%;
padding: 10px 0;
font-size: 1rem;
letter-spacing: 1px;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background-color: transparent;
color: indianred;
}
.form .input label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 1rem;
pointer-events: none;
transition: .3s ease-out;
}
.form .input input:focus+label .form .input input:valid+label {
transform: translateY(-18px);
color: #ff652f;
font-size: .8rem;
}
.submit-button {
display: block;
margin-left: auto;
border: none;
outline: none;
background: #ff652f;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.forgot-password {
color: inherit;
}
#forgot-password {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
height: 0;
z-index: #fff;
opacity: 0;
transition: 0.6s;
}
#forgot-password:target {
height: 100%;
opacity: 1;
}
.close {
position: absolute;
right: 1.5rem;
top: 0.5rem;
font-size: 2rem;
font-weight: 900;
text-decoration: none;
color: inherit;
}
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="LoginTwo.css">
<title>LoginFormTwo</title>
</head>
<body>
<div class="login">
<form action="" class="form">
<img src="avatarTwo.jpg" alt="">
<h2>Login</h2>
<div class="input">
<input type="text" name="loginUser" id="loginUser">
<label for="loginUser">User Name</label>
</div>
<div class="input">
<input type="password" name="loginPassword" id="loginPassword">
<label for="loginPassword">password</label>
</div>
<input type="submit" value="login" class="submit-button">
Forgot Password?
</form>
<div id="forgot-password">
<form action="" class="form">
×
<h2>Reset Password</h2>
<div class="input">
<input type="email" name="email" id="email" required>
<label for="email">Email</label>
</div>
<input type="submit" value="Submit" class="submit-button">
</form>
</div>
</div>
</body>
</html>
The problem I see here is that you didn't set a position: relative; to the <div> with class .input.
Since you set a position: absolute; to the label, its positioning is calculated from the closest parent with a position: relative; set. In your case, it's the <form> with class .form
Try adding these changes:
.form .input {
position: relative;
}
and adjust the top property of the label:
.form .input label {
top: -30px;
}
Here's a working Codepen
Hope this helps!
It's because your form is set to absolute so your labels are relative to the form.
By putting top: 0; your labels will be on top of the form. You can fix this by changing the .input position to relative like so:
.input {
position: relative;
}
And you can change the labels position by modifying the top value
.form .input label {
top: -25px /*or any value you want*/
}
I am trying to build a Dual Step Slider using HTML and CSS alone without any JQuery. It is working fine in Chrome and Mozilla, But in IE11, it is not registering the click inside first input element.
I designed the slider by using position:absolute and made two html input sliders on top of each other. In IE, i could click and drag on Second Input Elemenr only.
.slider {
-webkit-appearance: none;
width: 100%;
//height: 10px;
position: absolute;
//background: #f3f3f3;
outline: none;
border-radius: 8px;
}
.slider input {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 25%;
top: 15px;
width: 50%;
outline: none;
height: 18px;
margin: 0;
padding: 0;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: #E6E6E6;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
//border: none;
height: 20px;
width: 20px;
border-radius: 50%;
background: white;
border: 1px solid #3972D6;
margin-top: -4px;
cursor: pointer;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #e6e6e6;
border: 2px solid #cdcdcd;
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #ea4550;
pointer-events: all;
position: relative;
z-index: 10;
-moz-appearance: none;
}
.slider input::-moz-range-track {
position: relative;
z-index: -1;
border: 0;
}
.slider input:last-of-type::-moz-range-track {
-moz-appearance: none;
background: none transparent;
border: 0;
}
.slider input[type="range"]::-moz-focus-outer {
border: 0;
}
.flex-next {
display: flex;
justify-content: flex-start;
}
.dual-slider-container {
position: relative;
width: 100%;
}
.dual-slider-text-left {
position: relative;
bottom: 12px;
right: 8px;
.text-style {
color: #303030;
font-size: 20px;
font-weight: 600;
text-align: right;
}
.text2 {
text-align: right;
font-size: 14px;
}
}
.dual-slider-text-right {
position: relative;
bottom: 12px;
left: 8px;
.text-style {
color: #303030;
font-size: 20px;
font-weight: 600;
text-align: left;
}
.text2 {
text-align: left;
font-size: 14px;
}
}
.pointer {
cursor: pointer;
}
//Internet Explorer Support
input[type=range]::-ms-track {
width: 100%;
height: 8px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
#lower::-ms-fill-lower {
background: #E6E6E6;
border-radius: 10px;
}
#lower::-ms-fill-upper {
background: #E6E6E6;
border-radius: 10px;
}
#higher::-ms-fill-lower {
background: transparent;
border-radius: 10px;
}
#higher::-ms-fill-upper {
background: transparent;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
//border: none;
height: 18px;
width: 18px;
border-radius: 50%;
background: white;
border: 1px solid #3972D6;
//cursor: hand;
}
input[type=range]::-ms-tooltip {
display: none;
}
<div style="padding:8px" class="col-12 row m-0">
<div class="dual-slider-text-left col-2 p-0">
<div class="text-style">
{{minValue}}
</div>
<div class="text2">{{minValueText}}</div>
</div>
<div class="col-8 p-0">
<div class="dual-slider-container">
<input (click)="getSliderOneValue($event)" type="range" min="{{minValue}}" max="{{maxValue}}" step="1"
value="{{sliderOneValue}}"
class="slider" [disabled]="disabled" [ngClass]="{'pointer' : !disabled}"
id="lower">
</div>
<div class="dual-slider-container">
<input (click)="getSliderTwoValue($event)" type="range" min="{{minValue}}" max="{{maxValue}}" step="1"
value="{{sliderTwoValue}}"
class="slider" [disabled]="disabled" [ngClass]="{'pointer' : !disabled}"
id="higher">
</div>
</div>
<div class="dual-slider-text-right col-2 p-0">
<div class="text-style">{{maxValue}}</div>
<div class="text2">{{maxValueText}}</div>
</div>
</div>
It seems that you can only reach the second slider if they're lapped in IE. You could use two slides side by side as a workaround. I make a demo and you could refer to it.
body {
min-height: 100px;
}
div {
display: flex;
}
input {
flex: 1 0 0;
min-width: 0;
padding: 0;
}
input::-webkit-slider-thumb {
margin: 0;
padding: 0;
}
output {
display: block;
text-align: center;
margin-top: 3px;
color: gray;
}
<div>
<input id="a" type="range" min="0" max="10" value="0" />
<input id="b" type="range" min="11" max="20" value="20" />
</div>
<output></output>
How do I display "Confirm Password" in a single line ?
I add an <span id="confirm">Confirm Password</span> and I did this, doesn't work:
#confirm {
display: inline;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: Royalblue; /*#f0f0f0;*/
}
.head {
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
background: rgba(0, 250, 0, 0);
color: #FFFACD;
font-family: 'Cinzel', sans-serif;
font-size:30px;
}
.content {
position:relative;
top:8px;
width: 30%;
margin: 50px
auto 0px;
}
form {
position: relative;
margin-top: 0;
margin-left: 0;
width: 89%;
height: 300px;
padding: 20px;
border: 1px solid #B0C4DE;
background: rgba(0, 250, 0, 0);
border-radius: 0px 0px 10px 10px;
}
label {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
z-index: -1;
border: 0;
color: white;
left: -65%;
top: -30px;
}
.username {
position: relative;
top: 65px;
}
.password {
position: relative;
top: 130px;
}
.con-pass {
position: relative;
top: 195px;
}
#confirm {
display: inline;
}
input {
position: absolute;
font-family: 'Montserrat', sans-serif;
border: 0;
border-bottom: 2px solid beige;
background: transparent;
font-size: 15px; /*BORDER yes/no*/
height: 25px;
width: 250px;
outline: 0;
z-index: 1;
left: -74px;
top: -30px;
}
span {
position: absolute;
top: 5px;
left: -6px;
transition: top .5s ease, font-size .5s ease;
}
input:focus + label > span,
input:valid + label > span {
top: -20px;
font-size: 11px;
/* padding-bottom: 15px;*/
}
label::after {
content: '';
position: absolute;
top: 27px; /* ::after position */
left: -7px;
width: 250px;
height: 23px;
border-radius: 2px;
transition: transform .3s;
}
label::after {
z-index: -1;
background: beige; /*#a86bf;*/
transform: scale3d(1, 0, 1);
transform-origin: top;
}
input:focus + label::after,
input:valid + label::after {
transform: scale3d(1, -1.3, 1);
transition-timing-function: linear;
top: 27px; /* ::after position */
}
input:focus {
border-radius: 2px;
}
<div class="content">
<p class="head">Register</p>
<form>
<div class="content">
<div class="email">
<input type="text" id="email" required /> <!--input field-->
<label for="email"><span>Email</span></label>
</div>
<div class="username">
<input type="text" id="user" required />
<label for="user"><span>Username</span></label>
</div>
<div class="password">
<input type="text" id="pass" required /> <!--input field-->
<label for="pass"><span>Password</span></label>
</div>
<div class="con-pass">
<input type="text" id="c-pass" required />
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
</div>
</div>
</form>
</div>
You can use white-space: nowrap; for that :
#confirm {
white-space: nowrap;
}
Here is a resource for the white-space property in CSS.
Use white-space: nowrap; for class con-pass
You can also insert a in your html. That will ensure the two Words are kept on the same line:
<label for="c-pass"><span id="confirm">Confirm Password</span></label>
I want the image to be overlay with white color tick mark on it(As it is selected), i have lot of multiple images for my table, actually really I don't know how to do that, look my code, its cant do that like my attached image , and click on the image cant click another image ,
please help me to fix this
I need like this
img {
border-radius: 50%;
}
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 30px; height: 30px;
transform: translate(-50%,-50%);
color: white;
font-size: 20px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
</label>
<input type="radio" name="selimg" id="selimg1">
<div class="caption">
</div>
</div>
Thanks,
you need to take input as a checkbox to select multiple items. radio button is use to select only one item. this should work for you :
img {
border-radius: 50%;
}
.caption {
position: absolute;
top: 0;
left: 5px; /* changed to match image_grid padding */
height: 100%;
width: calc(100% - 5px); /* changed to match image_grid padding */
padding: 0 10px;
box-sizing: border-box;
pointer-events: none;
border-radius:500px;
}
.imageandtext {
position: relative;
}
.image_grid {
display: inline-block;
padding-left: 5px;
}
.image_grid img { /* added rule */
display: block;
}
.image_grid input {
display: none;
}
.image_grid input:checked + .caption {
background: rgba(0,0,0,0.5);
}
.image_grid input:checked + .caption::after {
content: '✔';
position: absolute;
top: 50%; left: 50%;
width: 30px; height: 30px;
transform: translate(-50%,-50%);
color: white;
font-size: 20px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
}
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg1">
<img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
</label>
<input type="checkbox" name="selimg" id="selimg1">
<div class="caption">
</div>
</div>
<div class="grid-two imageandtext">
<div class="imageandtext image_grid">
<label for="selimg2">
<img src='https://i.imgur.com/0geAFQz.png' style="width:200px" />
</label>
<input type="checkbox" name="selimg" id="selimg2">
<div class="caption">
</div>
</div>
There stylized input, but the zoom in / out, they change size, it seems as if the border is lost, I can't understand what went wrong, thanks in advance.
My codepen
For example, Chrome - zoom 75%
<div class="checkbox-remember-me">
<input type="radio" name="gender" id="male" checked/>
<label for="male"></label>
</div>Male
This happens because you use an absolute positioned label to cover its parent partially to make it appear to have a border, and when the page is zoomed, depending on how the browser calculate its position, it jumps a pixel up and down, hence sometimes fully aligns with its parent's edge.
Update your css like this, and use a border instead, and it will work fine.
.checkbox-remember-me {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
border: 1px solid #666;
margin-left: 34px;
margin-right: 10px;
}
.checkbox-remember-me label {
width: 22px;
height: 22px;
cursor: pointer;
position: absolute;
background: #eee;
margin: 1px;
}
.checkbox-remember-me {
display: inline-block;
width: 24px;
height: 24px;
position: relative;
border: 1px solid #666;
margin-left: 34px;
margin-right: 10px;
}
.checkbox-remember-me label {
width: 22px;
height: 22px;
cursor: pointer;
position: absolute;
background: #eee;
margin: 1px;
}
.checkbox-remember-me label:after {
content: '';
width: 15px;
height: 10px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid red;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
transform: rotate(-45deg);
}
.checkbox-remember-me label:hover:after {
opacity: 0.3;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked + label:after {
opacity: 1;
}
<h4>Gender</h4>
<div class="checkbox-remember-me">
<input type="radio" name="gender" id="male" checked/>
<label for="male"></label>
</div>Male
<div class="checkbox-remember-me">
<input type="radio" name="gender" id="female" />
<label for="female"></label>
</div>Female
Updated codepen: https://codepen.io/anon/pen/LRLrNO