Enlarge checkbox showing through a modal

HTML & CSS
1

I am using this code to enlarge a checkbox. Works good except if I click on a modal, you can see the check box through the modal. If I don’t use this script, you can’t see the checkbox through the modal.

Any thoughts would be appreciated.

<style>

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
}

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

</style>
2

The transform property creates a new stacking context. Elements that are transformed are similar to positioned elements in that they are removed from normal document flow.

CSS stacking contexts: What they are and how they work
Using CSS transforms - CSS: Cascading Style Sheets | MDN

I’m not sure, but you may be able to fix it with z-index.

Can you post a link to your page or post a working example of the problem?

3

That’s a good idea. I looked into that and couldn’t get that to work. Tried a couple of examples. Where would you place the z index and would you use a position?

Thanks

4

You would place the z-index on your input since it is the element being transformed. You will need to add position:relative to it also in order for the z-index to work.

Here is an example showing that a transformed element (your input) lower in the html source stacks above a positioned element (your modal).

If you remove the comments from position:relative and z-index you will see it go behind the modal.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.modal {
position:fixed;
width:80vw;
height:80vh;
background:red;

}
.transformed {
width:40vw;
height:45vh;
background:blue;
transform:scale(1.5);
/*position:relative;
z-index:-1; */
}
</style>

</head>
<body>
<div class="modal"></div>
<div class="transformed"></div>
</body>
</html>
5

Or simply remove the transform rule and increase the height a bit and you will see that it is indeed behind the modal when it is not transformed. It has no stacking context when it is not transformed and the positioned modal is on top.

.transformed {
width:40vw;
height:85vh;
background:blue;
}

Oh btw, you should be able to loose all those vendor prefixes now and use the native transform property.

caniuse CSS3 Transforms

6

Using your code works as did mine until I used the css to enlarge the checkbox. So I have your code in place, how do I increase the size of the checkbox for it to work in Edge, FF, Chrome and Safari; the main browsers?

7

I think you missed my instructions about removing the css comments.

Comments removed now and transformed element goes behind modal as mentioned .

If that doesn’t work for you then you will need to post your complete code with html and css so we can see exactly what your doing.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.modal {
position:fixed;
width:80vw;
height:80vh;
background:red;

}
.transformed {
width:40vw;
height:45vh;
background:blue;
transform:scale(1.5);
position:relative;
z-index:-1; 
}
</style>

</head>
<body>
<div class="modal"></div>
<div class="transformed"></div>
</body>
</html>
8

I did see that. I am just having difficulty increasing the size of the checkbox similar in size to my first post.
Here’s what I have:

<script language="JavaScript">
<!--    Begin
    function checkCheckBox(f) {
        if (f.agree.checked == false) {
            alert('Please check agree and accept box to continue.');
            return false;
        } else
            return true;
    }
//  End -->
</script>

<style>
input[type=checkbox]
.transformed {
width:80vw;
height:85vh;
background:blue;
transform:scale(1.5);
position:relative;
z-index:-1; 
}

</style>

<div class="transformed">I agree and accept:<input type="checkbox" value="0" name="agree"></div>
9

Your CSS selector is wrong, you should just be targeting the input.
Where is your modal?

Revising the code you posted the input scales just fine. I changed the z-index to (1), your modal will need to be a higher number. We can’t use a negative z-index on the input, you won’t be able to check it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
input[type=checkbox] {
transform:scale(2);
position:relative;
z-index:1;
}

</style>

</head>
<body>
<div>I agree and accept:<input type="checkbox" value="0" name="agree"></div>

<script>
    function checkCheckBox(f) {
        if (f.agree.checked == false) {
            alert('Please check agree and accept box to continue.');
            return false;
        } else
            return true;
    }
</script>
</body>
</html>
10

This shows the input behind the modal, remove the opacity on the modal.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
input[type=checkbox] {
transform:scale(2);
position:relative;
z-index:1;
}
.modal {
position:fixed;
z-index:2;
width:85vw;
height:85vh;
background:blue;
opacity:.5;
margin:auto;
left:0;right:0;
top:0;
}
</style>

</head>
<body>
<div>I agree and accept:<input type="checkbox" value="0" name="agree"></div>
<div class="modal"></div>
</body>
</html>
11

I tried that, same issue. Here’s the modal:

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.modal-overlay {
	position: fixed;
	top:0;
	left:0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .2s ease;
}
.modal-overlay.active {
	display: table;
}
.modal-overlay.visible {
	opacity: 1;
}
.modal-inner {
	display: table-cell;
	vertical-align: middle;
}
.modal-container {
	margin: 0 auto;
	width: 50%;
	min-width: 750px;
	max-width: 850px;
	max-height: 600px;
	overflow: auto;
	border: 1px solid;
	background: #fff;
	border-radius: 5px;
}
@media screen and (max-width:750px){
	.modal-container{min-width:0;width:80%;}
}
.modal-header {
	text-align: right;
}
.modal-close {
	margin-right: .25em;
	color: inherit;
	text-decoration: none;
	font-size: 2rem;
	font-weight: bold;
}
.modal-content {
	padding: 0 10px;
}
.modal-content p {
	margin: 0 0 1em;
}
.hide {
	display: none;
}
p.open {
	margin: 1em;
	text-align: center;
	font-size: 1em;
	font-weight: 600;
	color: #4c659b;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
}
.modal-selection{
	display:flex;
	justify-content:space-between;
	max-width:600px;
	margin:auto;
}
.iframe-wrap{
	width:100%;
	position:relative;
	padding-top:65%;
}
.modal-overlay iframe{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}


@media print {
	html,body{background:#fff!important;color:#000!important;}
	body.modal-visible  * {visibility:hidden!important;height:0;overflow:hidden;line-height:0;}
	body.modal-visible  .modal-overlay, body.modal-visible .modal-overlay * {visibility:visible!important;height:auto;overflow:visible;line-height:normal;}
	.modal-overlay,.modal-inner,.modal-container {display:block;width:auto;height:auto;background:#fff;}
	.modal-container{border:none;width:auto;height:auto;min-width:0;max-width:none;max-height:none;border-radius:0;overflow:visible}
	.modal-header{display:none;}
	.modal-overlay{position:absolute;top:0;}
}
12

I don’t see a higher z-index on your modal.

I had the input as z-index:1 and the modal as z-index:2

1 Like
13

How and where do I change that on my modal? And can that affect it’s use elsewhere when used?

14

Just add z-index to your initial modal rules.

Of course this this assumes you have a z-index:1; on your input like I showed in my last example.

.modal-overlay {
	position: fixed;
    z-index:2; /*added this*/
	top:0;
	left:0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .2s ease;
}

Just use z-index when you need it.

1 Like
15

I did earlier try that; might of had it in the wrong spot, but tried it again, same problem. I cleared cache and on other browsers, same result.

16

GOT IT NOW, slight typo on my part. Yes, that did it - having a higher value.

Thanks! Really appreciate it.

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.