CSS Labels and Checkboxes

Post reply
0 favourites
  • 5 posts

  • 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

  • Little bump. Could you look into this Ashley ?

  • This sounds more like a general CSS question you could post to a site like StackOverflow rather than something specific to C2.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • The thing is that it works on a regular web page but not on C2.

  • 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
  • 5 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)