Can't change textbox (text input) width

Hawkmoth

I'm using Twine 2, Sugarcube 2.

I have a passage where I use <<textbox, and I'm trying to change the width (make it narrower).

This is the CSS I'm using:

input, input:focus, input:hover {background-color: #000;
color: #f0f0f0;
font-family: Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #f0f0f0;
min-width: 8em;
max-width: 8em;
width: 8em;}

But this only changes the width for when I'm hovering on the text box, or clicking inside it. Its default (no focus, no hover) size, however, remains the same.

What can I do?

TheMadExile

Please use the code tag when posting code—it's C on the editor bar.


You're modifying all <input> elements, not simply those of type text or, specifically, those created by <<textbox>> macros.

You want the following basic selector to target all text <input> elements, regardless of origin:

input[type="text"]

You want the following basic selector to target only text <input> elements created by <<textbox>> macros:

input.macro-textbox

Hawkmoth

That works perfectly. Thank you.

spaceranger123

As a huge css newb, how would I apply this or any css code to modifying just one individual textbox?

Im guessing I can do this by defining a class? Or a div or a span ?

spaceranger123

I figured it out

.passage span.box1 
input[type="text"]
{

attribute-name:value
}
.passage span.box2 
input[type="text"]

{

attribute-name:value
}
.passage span.box3
input[type="text"]
{

attribute-name:value
}

And this to use it

 <span class="box1"><<textbox "$name" "" "passage">></span>.

 <span class="box2"><<textbox "$name" "" "passage">></span>.

 <span class="box3"><<textbox "$name" "" "passage">></span>.