0 votes
by (230 points)

There seems to be some wizardry going on with sugarCube that I can't crack. I want to change the appearnace of elements such as input text fields and select boxes/their options, but my CSS doesn't seem to be working. There is some sort of style being applied when the mouse hovers over these elements, which doesn't seem right as only anchor tags and buttons have the "hover" property available in the CSS selector (as far as I've been able to find).

Here is what I have. I'm able to resize everything just fine, but colors aren't working in these instances:

select {
			border: 1px solid #777;
			height: 2em;
			background-color: black;
}
select:focus {
			background: #33000;
			min-width: 20em;
}
option {
			background: #33000;
}

There's nothing about the hover styles here becase--as i said--I can't figure out how SugarCube is doing that. Is it bult-in JavaScript? If so, is there a way to override it?

1 Answer

0 votes
by (44.7k points)

It's just CSS causing that, using the ":hover" pseudo-class.  Here's the CSS:

input:not(:disabled):focus, input:not(:disabled):hover, select:not(:disabled):focus, select:not(:disabled):hover, textarea:not(:disabled):focus, textarea:not(:disabled):hover {
	background-color: #333;
	border-color: #eee;
}

You can see that if you right-click on one of those elements and choose "Inspect" on the pop-up menu.

Just modify that CSS to how you'd prefer it and you should be fine.

Have fun!  :-)

by (230 points)
Ok, thank you very much! I didn't realize i needed all the 'not-disabled stuff, and I was under the imprression that :hover didn't work with anything but links and buttons. Maybe one day I won't be constantly baffled by CSS. :P
...