What is the CSS id of this?

1 favourites
  • 7 posts
  • I have this file and I want to know what to add on my TextBox ID. I watched a tutorial about it but this one is different so I am not sure. I tried a few things and it didn't work. Here is the code:

    body {

    background-color: #000000;

    font-family: "Arial", sans-serif;

    font-size: 40px;

    color: #00FF00;

    }

    #hiddenInput {

    font-size: 40px;

    font-family: "Arial", sans-serif;

    background-color: #808080;

    position: absolute;

    opacity: 0.4;

    margin-top: -22px;

    margin-left: -125px;

    opacity: 0;

    filter: alpha(opacity = 0);

    }

    #container {

    position: absolute;

    top: 80px;

    left: 50%;

    }

    #input {

    position: absolute;

    margin-top: -20px;

    margin-left: -120px;

    }

    .letterContainer {

    display: inline;

    white-space: nowrap;

    }

    .letterStatic {

    display: inline;

    }

    .letterAnimTop {

    display: inline;

    position: absolute;

    -webkit-animation: dropTop 0.1s ease;

    -moz-animation: dropTop 0.1s ease;

    }

    .letterAnimBottom {

    display: inline;

    position: absolute;

    -webkit-animation: dropBottom 0.1s ease;

    -moz-animation: dropBottom 0.1s ease;

    }

    .blink {

    position: static;

    top: -5px;

    -webkit-animation: blink 0.3s ease 0 infinite alternate;

    -moz-animation: blink 0.3s ease 0 infinite alternate;

    }

    blink {

    from {

    opacity: 0;

    }

    to {

    opactiy: 1;

    }

    }

    blink {

    from {

    opacity: 0;

    }

    to {

    opactiy: 1;

    }

    }

    dropTop {

    from {

    -moz-transform: translateX(0) translateY(-20px) translateZ(20px)

    rotateX(90deg);

    transform: translateX(0) translateY(-20px) translateZ(20px) rotateX(90deg);

    }

    to {

    -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);

    transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);

    }

    }

    dropBottom {

    from {

    -moz-transform: translateY(20px) translateZ(20px) rotateX(-90deg);

    transform: translateY(20px) translateZ(20px) rotateX(-90deg);

    }

    to {

    -moz-transform: rotateX(0deg);

    transform: rotateX(0deg);

    }

    }

    dropTop {

    from {

    -webkit-transform: translateX(0) translateY(-20px) translateZ(20px)

    rotateX(90deg);

    }

    to {

    -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg);

    }

    }

    dropBottom {

    from {

    -webkit-transform: translateY(20px) translateZ(20px) rotateX(-90deg);

    }

    to {

    -webkit-transform: rotateX(0deg);

    }

  • Without knowing what you want to achieve, this is hard to advise on, you've just posted a block of CSS.

  • I saw a tutorial on how to add custom style on a TextBox in construct 2. the guy there took a name that the CSS had and put it as the ID, so that the TextBox looked and worked graphically like the CSS. But this one is more complex so I don't know exactly which ID it is.

    Here is the tutorial: youtube.com/watch v=-pdvGaglxFM

    (I added a SPACE on v= because it wasn't accepting the link.)

    I don't want it for a button though, but a textbox. The same principal should work though, right? just find the correct name from the CSS and add it to the ID area of the TextBox. This CSS is basically just an area to write, but looks really cool and i customized it in a program online.

  • The code that you've posted has several IDs - in HTML an element typically only has one. The formatting looks a bit weird, were you originally using a preprocessor? You'll want raw CSS for it to work properly.

    Construct doesn't have any good way of supporting CSS classes, you can set an ID, but for anything else you have to the use the Set Style action and add each rule line by line; for this reason it's worh bundling all of your CSS into a single ID.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Oh I see, this is much easier, thanks!

    I managed to style it my own way but the only thing that bothers me is that when I click on the textbox, the blue outline appears on the border making it look bad. Is there a way for the blue outline to become invisible, or at least black?

  • Yes - however it's a pseudoclass, so you'll likely have to include it within the page HTML, though you could use Scripting to apply it to your element ID with JS.

    input:focus {outline: none}

    If the outline property is something you don't use in your initial styling, you could apply it there, alternatively if you do, you could force the initial styling into the focus state by using !important.

  • I did: textbox-set css style outline-black

    and it worked exactly as I wanted it to. Thank you for everything! :)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)