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

Chris Rice shared this idea 6 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!

Best Answer
photo

Right now, you can customize many properties of Input Text Fields, but unfortunately you cannot customize or change the size of checkboxes or radio buttons.

Comments (19)

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
2

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.

photo
1

Right now, you can customize many properties of Input Text Fields, but unfortunately you cannot customize or change the size of checkboxes or radio buttons.

photo
3

I hope so too that checkboxes and radio buttons would be customizable in the future in JIM. I've been struggling for two days trying to find a workaround for this problem but could not find any.

The internet is full of different UI platforms and thus it's not good enough that in JIM we cannot mimic those popular styles.

I hope you work hard to offer us a solution for this in the near future.

photo
1

I'd like to know if I can customize the input text field to be "text wrap" so that the text that a user inputs displays like a short paragraph rather than one long sentence. Thanks!

photo
2

Sure! Just change the Input Text Field 'Type' in the Properties palette to be 'Text Area'.

46bdbd77d84eb3cc2533bb351fc413fd

photo
2

Super helpful! Thanks so much!

photo
2

Hello everyone. It's my first time to use Justinmind Prototyper. I just want to ask if it is possible to customize the corners of rounded rectangle? Like for example, (top-left: 10, top-right: 10, bottom-right: 0, and bottom-left: 0.)

photo
2

Yes, just change the borders to the bottom to 'none', but leave the top, right, and left borders as solid.

211455eda348cc15d4878060a25eb326

photo
1

Thank you Ms. Danielle for answering my question, I really appreciate it.


My next question is about customizing the corners of the table and make it round, is it also possible? Because "Round" is missing in its properties.

photo
1

Unfortunately it's not possible to round the corners of a table right now, but I'll let our team know that this would be helpful.

A workaround could be to remove all borders in the table and make the background transparent. Then, place a rectangle with the desired roundness behind the table. It would then look like the table is rounded.

photo