Form styles (dropdown, radio, checkbox)

Vitaliy WD
311 Posts
Vitaliy WD posted this 28 January 2015

Hello.

Is it possible to add more form style controls?

Now it possible to style only the inputs, but it would be great, if there will be an option to style also radio buttons, checkboxes, dropdown lists etc.

Also add to forms icons, warnings (if some fields empty) etc.

Some examples: http://medleyweb.com/resources/css-form-examples-tools-and-solutions

To users: please vote for this topic if you have interest in this feature.

Hello. Is it possible to add more form style controls? Now it possible to style only the inputs, but it would be great, if there will be an option to style also radio buttons, checkboxes, dropdown lists etc. Also add to forms icons, warnings (if some fields empty) etc. Some examples: http://medleyweb.com/resources/css-form-examples-tools-and-solutions To users: please vote for this topic if you have interest in this feature.
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 29 January 2015

Hi,

We've added your request to our wish list.

Thank you very much for your inputs!

Olivia

Hi, We've added your request to our wish list. Thank you very much for your inputs! Olivia
Linkebel
164 Posts
Linkebel posted this 29 January 2015

+1 for me

+1 for me
khaledwhisper
37 Posts
khaledwhisper posted this 09 February 2015

+100 for me :)

+100 for me :)
Stagger Lee
1841 Posts
Stagger Lee posted this 26 May 2015

Vote for it, it is very important.

http://silviomoreto.github.io/bootstrap-select/
http://gregfranko.com/jquery.selectBoxIt.js/index.html
http://tympanus.net/Development/SimpleDropDownEffects/index.html
http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html

Vote for it, it is very important. http://silviomoreto.github.io/bootstrap-select/ [http://gregfranko.com/jquery.selectBoxIt.js/index.html][1] http://tympanus.net/Development/SimpleDropDownEffects/index.html [http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html][2] [1]: http://gregfranko.com/jquery.selectBoxIt.js/index.html [2]: http://tympanus.net/Tutorials/CustomDropDownListStyling/index2.html
kasparomail
1 Posts
kasparomail posted this 01 August 2015

This feature was on artisteer ... :/

This feature was on artisteer ... :/
williamvanveen1988
80 Posts
williamvanveen1988 posted this 26 August 2015

YES DO :)

YES DO :)
lesergei
102 Posts
lesergei posted this 26 August 2015

Hello,

I join my vote to this request.

And I ask a question: Is there an easier way to align the position of the text in forms, than having to manually edit the file bootstrap.css.

Thank you

Hello, I join my vote to this request. And I ask a question: Is there an easier way to align the position of the text in forms, than having to manually edit the file bootstrap.css. Thank you
Support Team
Support Team posted this 27 August 2015

Hello

You can add css override code to the Themler Settings >> Additional CSS.

Thank you,
Olivia

Hello You can add css override code to the Themler Settings >> Additional CSS. Thank you, Olivia
A. Atonyan
2 Posts
A. Atonyan posted this 25 May 2017

in Design-> Styles ->More styles
I can see many controls, but not drop-down list checkbox radio-button.
is there a reason you are not adding styles customization for these?
I can see that first this feature was requested in 28 January 2015.
please take a look at the attachment. how can i fix drop-down list to be of a reasonable length?

in Design-> Styles ->More styles I can see many controls, but not drop-down list checkbox radio-button. is there a reason you are not adding styles customization for these? I can see that first this feature was requested in 28 January 2015. please take a look at the attachment. how can i fix drop-down list to be of a reasonable length?
Support Team
Support Team posted this 28 May 2017

Hi,

The main reason is that select, checkbox and radio button do not support styling. The only way to make them styled is replace with something different which looks similar. Since there is no standard way for this the html structures of such elements may be totally different. To use our styles the form elements must have the same structure as Themler theme uses to apply style. It is difficult to achieve if you're using forms generated by third-party plugins.

please take a look at the attachment. how can i fix drop-down list to be of a reasonable length?

This is default length is bootstrap forms:
http://getbootstrap.com/css/#forms

This length can be affected through the input element width. Set it as auto, in px or %%.

Thank you,
Olivia

Hi, The main reason is that select, checkbox and radio button do not support styling. The only way to make them styled is replace with something different which looks similar. Since there is no standard way for this the html structures of such elements may be totally different. To use our styles the form elements must have the same structure as Themler theme uses to apply style. It is difficult to achieve if you're using forms generated by third-party plugins. > please take a look at the attachment. how can i fix drop-down list to be of a reasonable length? This is default length is bootstrap forms: http://getbootstrap.com/css/#forms This length can be affected through the input element width. Set it as auto, in px or %%. Thank you, Olivia
Kevin Doussaint
12 Posts
Kevin Doussaint posted this 04 December 2017

Hi everybody,

I just come back with a little solution that worked for me and is really easy to include in themler
:

In additionnal CSS (Themler Settings >> Additional CSS) include this :

input[type=checkbox]
{
/* Double-sized Checkboxes /
-ms-transform: scale(2); /
IE /
-moz-transform: scale(2); /
FF /
-webkit-transform: scale(2); /
Safari and Chrome /
-o-transform: scale(2); /
Opera */
padding: 10px;
}

/* Might want to wrap a span around your checkbox text /
.checkboxtext
{
/
Checkbox text */
font-size: 110%;
display: inline;
}

It will double your checkbox, you can modify the values.

Ps: please stop complaining with artisteer and learn how to use Themler wich is a fantastic tool, artisteer seems easyer but is totally useless when you leared on how to use themler !
Thanks for the themler team :)

Kevin

Hi everybody, I just come back with a little solution that worked for me and is really easy to include in themler : In additionnal CSS (Themler Settings >> Additional CSS) include this : input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ padding: 10px; } /* Might want to wrap a span around your checkbox text */ .checkboxtext { /* Checkbox text */ font-size: 110%; display: inline; } It will double your checkbox, you can modify the values. Ps: please stop complaining with artisteer and learn how to use Themler wich is a fantastic tool, artisteer seems easyer but is totally useless when you leared on how to use themler ! Thanks for the themler team :) Kevin
You must log in or register to leave comments