How do I css style a file chooser?

Get help using Construct 2

Post » Mon Nov 30, 2015 4:50 pm

I would post this in the CSSImport thread but the dev hasn't been on in months.

I'm using the CSSImport plugin, which works fantastic. Here's my issue. I'm trying to style the button, and just the button for the FileChooser. I can apply a CSS style to the FileChooser using it's 'ID' option. And I can style it by adding in a blanket style for any 'input'. But that applies a style to the entire FileChooser object and leaves the button untouched. It's still that ugly Dom button.

I've tried applying style to input[type="button"] and that doesn't work.

I know it can be done... https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/ but that technique requires a class.

I've tried dozens of ways to do this and so far, no luck. Has anyone succeeded in doing this?

And no, hiding it and placing a sprite over it won't work well. I want it to look like the buttons right beside it.
B
16
S
8
Posts: 127
Reputation: 1,928

Post » Mon Nov 30, 2015 5:26 pm

Naturally, just as I posted this, I stumbled on the solution. So, for those who see this and want to know how...

With the CSSImport plugin, I set the ID of my FileChooser to 'chooser'.

In my style sheet I added this:

#chooser::-webkit-file-upload-button
{
visibility: hidden;
}

And that ugly button vanishes. Or, just apply your own styling to it.
B
16
S
8
Posts: 127
Reputation: 1,928

Post » Wed Aug 31, 2016 3:12 pm

set css-style "opacity" -> "0"
The whole life is in the movement.Stopped - fell asleep to hell...
B
14
S
3
G
1
Posts: 122
Reputation: 1,694


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 9 guests