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
My addons:
[PLUGIN]Value Monitor
[PLUGIN] Text Alignement
[BEHAVIOR]Timescale Ratio
[BEHAVIOR]Polar Coordinates
[PLUGIN]Action Sequence
[BEHAVIOR]Action Sequence
[BEHAVIOR]Instance Variable Control
B
35
S
6
G
2
Posts: 228
Reputation: 3,388

Post » Mon May 08, 2017 4:03 pm

Little bump. Could you look into this @Ashley ?
My addons:
[PLUGIN]Value Monitor
[PLUGIN] Text Alignement
[BEHAVIOR]Timescale Ratio
[BEHAVIOR]Polar Coordinates
[PLUGIN]Action Sequence
[BEHAVIOR]Action Sequence
[BEHAVIOR]Instance Variable Control
B
35
S
6
G
2
Posts: 228
Reputation: 3,388

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
397
S
236
G
88
Posts: 24,408
Reputation: 194,496

Post » Mon May 08, 2017 9:52 pm

The thing is that it works on a regular web page but not on C2.
My addons:
[PLUGIN]Value Monitor
[PLUGIN] Text Alignement
[BEHAVIOR]Timescale Ratio
[BEHAVIOR]Polar Coordinates
[PLUGIN]Action Sequence
[BEHAVIOR]Action Sequence
[BEHAVIOR]Instance Variable Control
B
35
S
6
G
2
Posts: 228
Reputation: 3,388

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;
}
My addons:
[PLUGIN]Value Monitor
[PLUGIN] Text Alignement
[BEHAVIOR]Timescale Ratio
[BEHAVIOR]Polar Coordinates
[PLUGIN]Action Sequence
[BEHAVIOR]Action Sequence
[BEHAVIOR]Instance Variable Control
B
35
S
6
G
2
Posts: 228
Reputation: 3,388


Return to Construct 2 General

Who is online

Users browsing this forum: brupibo and 8 guests