CSS Labels and Checkboxes

Discussion and feedback on Construct 2

Post » Sun May 07, 2017 11:23 pm

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
Code: Select all
#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;
         
}


And here is the result that I should have

Image

So please, if anyone could help me, that'd be cool
Image
B
33
S
6
G
2
Posts: 220
Reputation: 3,297

Post » Mon May 08, 2017 4:03 pm

Little bump. Could you look into this @Ashley ?
Image
B
33
S
6
G
2
Posts: 220
Reputation: 3,297

Post » Mon May 08, 2017 7:28 pm

This sounds more like a general CSS question you could post to a site like StackOverflow rather than something specific to C2.
Scirra Founder
B
387
S
230
G
87
Posts: 24,249
Reputation: 192,240

Post » Mon May 08, 2017 9:52 pm

The thing is that it works on a regular web page but not on C2.
Image
B
33
S
6
G
2
Posts: 220
Reputation: 3,297

Post » Tue May 09, 2017 9:11 am

Okay nevermind, I solved my problem

Here is the code if anyone is wondering
Code: Select all
#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;
}
Image
B
33
S
6
G
2
Posts: 220
Reputation: 3,297


Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 13 guests