How do I css style a file chooser?

  • 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.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • 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.

  • set css-style "opacity" -> "0"

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