CSS Labels and Checkboxes

Post reply

❤Follow Topic(2)

0 favourites

5 posts

skymen Affiliate
- Joined 3 Aug, 2015
- 72 topics • 341 posts
1

7 May, 2017
Quote

Hello.

Lately I've been messing around with CSS and Construct, especially using CCSImport plugin (as it gets very tiring with events).

This allowed me to make use of CSS Generators, and they all work fine. However, I can't seem to make changes to Checkboxes.

Well I can apply effects to text, but I can't touch the checkbox itself, the little box I mean.

Same I looked around, and apparently, I found out that you can't change it. So the way they do it is that you just move the box far away, and place an image where it should be. Image that gets changed when the checkbox is checked or not.

For that it uses Labels. But Labels don't seem to work with C2, so all it does is that it moves the checkbox far away, and nothing else.

I'm a CSS noob and if someone could help me that'd be cool.

Here's the code that I'm using right now

#check {

position:absolute; 
z-index:-1000; 
left:-1000px; 
overflow: 
hidden; clip: 
rect(0 0 0 0); 
height:1px; 
width:1px; 
margin:-1px; 
padding:0; 
border:0;
						
}

						
#check + label.css-label {

padding-left:30px;
height:25px;
display:inline-block;

line-height:25px;

background-repeat:no-repeat;

background-position: 0 0;

font-size:25px;

vertical-align:middle;

cursor:pointer;

}

						
#check:checked + label.css-label {
							
background-position: 0 -25px;
						
}

						
label.css-label {
				
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_391ce065f36b1460c4845fa9b5173fba.png);
		
-webkit-touch-callout: none;
				
-webkit-user-select: none;
				
-khtml-user-select: none;
				
-moz-user-select: none;
				
-ms-user-select: none;
				
user-select: none;
			
}[/code:2mw3s082]

And here is the result that I should have 

[img="https://image.noelshack.com/fichiers/2017/19/1494199392-chrome-2017-05-08-01-22-48.png"]

So please, if anyone could help me, that'd be cool

- skymen Affiliate
- - Joined 3 Aug, 2015
  - 72 topics • 341 posts
- 1
- 8 May, 2017
- Quote
Little bump. Could you look into this Ashley ?
- Ashley Construct Team Founder
- Moderator
- - Joined 21 May, 2007
  - 667 topics • 30,052 posts
- 1
- 8 May, 2017
- Quote
This sounds more like a general CSS question you could post to a site like StackOverflow rather than something specific to C2.
- skymen Affiliate
- - Joined 3 Aug, 2015
  - 72 topics • 341 posts
- 1
- 8 May, 2017
- Quote
The thing is that it works on a regular web page but not on C2.
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads

skymen Affiliate
- Joined 3 Aug, 2015
- 72 topics • 341 posts
2

9 May, 2017
Quote

Okay nevermind, I solved my problem

Here is the code if anyone is wondering

#check {    
    -moz-appearance: none;
        -webkit-appearance: none; 
    clip: rect(0 0 0 0); 
    height:1px; 
    width:1px; 
    margin:-1px; 
    padding:0; 
    border:0;
    padding-left:25px;
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_5ed3110c2dbfa898cff4fe25b69ceb41.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-repeat:no-repeat;        
    height:20px; 
    display:inline-block;            
    line-height:20px;    
    background-repeat:no-repeat;    
    background-position: 0 0;
    font-size:20px;
    vertical-align:middle;            
    cursor:pointer;        
}
        
#check:checked{
    background-position: 0 -20px;
}[/code:lzzdxyot]

Post reply

❤Follow Topic(2)