Custom styling of input widgets (text, checkbox, radio button, etc)

Chris Rice shared this idea 5 years ago
Completed

Would it be possible to add the ability to customize the design of some of the Input widgets (text input, checkbox, radio button, listbox, etc)?


Text Input:


Often, it's helpful to show rounded corners and a subtle inset-shadow effect for a standard input field, but today the only way to do it is to set a transparent Text Input Widget on top of a Rectangle Widget (with rounded corners).


Checkbox and Radio Button:


Could we define, at the Prototype level, a series of images that would govern checkboxes and radio buttons? (would need active, on, off, hover, disabled states...) It would be great if they could be sized dynamically as well. Currently, we have to create several different images with lots of hide/show logic to customize check boxes and radio buttons, and need to repeat the logic separately for each radio list and check list that we create (very time-consuming when mocking up long application processes).


Select List, Multi-select, List box:


Just like the Text input, could we add rounded corners and more styling, and also a custom dropdown carrat image (or scrollbar)?


This is a great tool - just a few suggestions for efficiency. Thanks!

Comments (10)

photo
1

This option has been included in version 5.6

photo
1

where can I find the documentation on how to do this?

photo
1

its great that its included, but where can I find the documentation to do it?

photo
1

Sorry... this has not been implemented.


You can add a background image for example to a "Custom Select List", but you cannot change it's appearance...

photo
1

Right now you can change these properties:


Background: background color, background image and transparency


Text: font family, modifier, size, color, horizontal alignment and vertical alignment


Padding: top, left right and bottom


Border: color, type, size for the 4 sides and also rounded corners


Shadow: box shadow and text shadow

photo
1

Indeed... but you cannot change the appearance of the the radio and checkbox buttons.


The "Custom Select List" arrow is always the same. And the drop down list as well as any "Radio Button" appearances are OS/Browser dependent.


You can change some properties. But to make (for example) the radio button look like this:


https://dribbble.com/shots/460526-VM-...


or like this:


https://dribbble.com/shots/329422-Cle...


Is just not possible. It always look like the OS/Browser Radio Button...


As the original commenter wrote, he wished to have a picture (done in Illustrator, Photoshot, etc) as the appearance of a button. This does not work for checkbox and radio button.


Hopes this clarifies... ;-)

photo
1

Oh, now I get it, thanks for clarifying it. There's a trick that might work in these cases. You can use a dynamic panel to 'cut' the section of the dropdown that has the arrow icon and place another icon below the drop down. Take a look at this prototype http://d2ld3he4yll0xl.cloudfront.net/...

photo
1

Hi,


Question 1: I`m trying to make my own flat ui widgets from the libraries we have available. Problem is with selects. In framework I would like to create for my project, I need selects to be green and text to be white. Everything cool, I managed to change select without problem but when I try (in simulation) change the value, the box with values is always white so white text is not visible unless highlited on mouseover. Will there be (or is) possibility to change dropdown`s values box? Lets say dropdown green/white, and values box grey/dark grey.


EDIT: Problem solved.


Another question: Do you plan to make more libraries for flat designs like FLAT UI for that instance?


Thanks

photo
2

I agree. I want to be able to change the appearance of text fields and other widgets. I wanted to have input fields with inset shadow effect but couldn't so I had to resort to creating images to put as backgrounds of the fields. This is a rather tedious process as you also have to create other images for effects like hover and focus etc. if you want your fields to be dynamic and look like what you've designed.

photo
1

I agree too. Its really cumbersome, especially if you want to use checkboxes for conditions. You cant do that comfortably if you make your own checkboxes.