Change Textbox/Area color?

Question

Is there a way for me to change the color of a textbox or textarea?  Right now it defaults to the background color, then a dark grey when hovered over.

 

Thansks!!

Answer 1

If you use your web-browser's built-in Web Developer Tools to Inspect the Elements of the HTML generated by a passage like the following:

<<set $pie to "", $pieEssay to "">>\

What's your favorite pie? <<textbox "$pie" "Blueberry">>

Write a short essay about pies:
<<textarea "$pieEssay" "">>

... you will see that the <<textbox>> macro generates a HTML input type="text" element and that the <<textarea>> macro generates a textarea element. And you can use CSS selectors in your Story Stylesheet area that target those element types to style how they appear.

input[type="text"] {
	background-color: green;
}
input[type="text"]:hover {
	background-color: brown;
}

textarea {
	background-color: blue;
}
textarea:hover {
	background-color: orange;
}

If you want to style some <<textbox>>'s or <<textarea>>s differently to others then when you Inspected the elements you would of also seen that SugarCube assigns an ID to the HTML element generated by those macros. Both of the generated IDs consist of the name of the macro combined with the name of the variable being passed to that macro.

eg. The above <<textbox>> is assign an ID of textbox-pie and the above <<textarea>> is assigned an ID of  textarea-pieessay.

You can use this knowledge to create CSS selector that targets a particular <<textbox>> or <<textarea>> like so

#textbox-pie {
	background-color: green;
}
#textbox-pie:hover {
	background-color: brown;
}

#textarea-pieessay {
	background-color: blue;
}
#textarea-pieessay:hover {
	background-color: orange;
}

 

Answer 2

You should be able to alter them in the way described here.

Comments

Even if I just used Sugarcube's <<textbox>> and <<textarea>> macros?

---

The sugarcube CSS for the textbox looks like this:

input[type=text], textarea {
    min-width: 20em;
}
input {
    padding: 2px 3px;
}
input, textarea {
    color: #fff;
    background-color: #111;
    border: 1px solid #444;
    padding: .4em;
}
button, input, textarea {
    outline: 0;
}

With this you should be able to alter the color of both <<textbox>>and <<textarea>>.