I need a combobox of checkboxes. I found this: http://code.google.com/p/dropdown-check-list and it looks like exactly what I need. But I really don't like it's style (appearance) and it doesn't fit the rest of my page.
Is there any way to have this control with "traditional" style - the same style normal <select> and <input type="checkbox"> have?
If not - is there any other custom control available that does the same but has the "normal" style? Or is there any simple (and short) way to create one by myself?
Related
Very simple question but I've been googling for hours and haven't found anything
How can i style the content/option/popup of a dropdownlist on the right side of the 'open button' like in this image/screenshot: https://www.dropbox.com/s/joqj00ahjrwqs0p/Capture.PNG?dl=0 ?
You cannot style it. You need to create a replacement element. Some browser elements can not be changed, or almost not be changed, with regard to their styling. They are so-called "native" (referring to the operating system) controls.
Check here for some jQuery based replacements which you can style whatever way you like:
http://jquery-plugins.net/fancyselect-jquery-plugin-for-custom-select-box
In HTML <select> tag, drop-down div (of options) appear below the <select> tag by default. Is it at all possible of bringing options of <select> tag above it?
Currently I am creating another div on click but that's not the real solution.
I was wondering if there is any css option for doing this using only <select> tag instead of creating separate div.
No, there is no css property to do it.
You will have to use Javascript librairies (or your own) to dynamically create a div, which will contain your options and display above the select input.
You can have a look at jQuery UI Autocomplete OR Dojo Combobox for example.
You will be able to theme the output and to display the options where you want, by adapting the code or modifying css properties.
There is no option in css property to do drop-up functionality. If you're interested lots of jQuery plugins available to customize the select tag.
Check this example and its source code.
I am a real noob in RoR, and missing basic concepts of programming in it.
I created a table with 3 boolean fields and corresponding show/edit/delete etc.
I have, as default, checkboxes for changing/creating those boolean fields.
Q: I would like to create a button instead of checkbox, which acts like checkbox and in case of 'checked' or 'unchecked' it sets corresponding color/image on button.
Edit: For those who negged this - at least tell me whats wrong with the question if that's so trivial to you
Cheers
Aledj
It seems that you simply want to give the checkbox a different style. While this can be accomplished by writing the CSS directly, you might be better off using a front-end framework like Bootstrap or a jQuery-UI theme which will do it for you, with some pre-defined styles.
Bootstrap
jQuery UI Themes
You can just use css to make most things look like most things:
CSS: styled a checkbox to look like a button, is there a hover?
Can the size of a radio button be changed in CSS--in all browsers that is? I cannot figure out how this can be done. If you know this is not possible, please let me know so I don't waste my time. I have not looked into CSS 3 for HTML 5 yet. Hmmmm...
Although radio buttons look is controlled by operating system there is some method for applying style for form elements like radio buttons: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
AFAIK it is not recommended to modify it.
CSS allows for some manipulation of the form element - so you should be able to set it's height and width as with any element. However the OS and Browser still have an impact on the final output.
The code in this demo demonstrates CSS rules and how they are used to style the radio buttons:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/
The easiest way to avoid using CSS - which is actually the more difficult way to accomplish this change - is to use javascript and css to replace the radio buttons and other form elements with custom images :
http://www.emblematiq.com/lab/niceforms/
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
What would be the best way to markup a menu button? The idea is to have a button with a text like "add" to fold out and show the options you can add.
I like the <menu> html5 tag but the label attribute doesn't sit well with me as it would mean the text would only show if a piece of JS has been loaded that actually places the text (ok I could use css generated content, but that doesn't work in IE7/8).
I thought about a <dl><dt>add</dt><dd>...</dd></dl> construction but I don't think it covers the wanted semantics.
Do you have any ideas?
You can place the actual element inside the label and still maintain a proper relationship between the two.
For example:
<label for="elementName"><element name="elementName" attribute="" attribute="">Element Label</element></label>
Similar to how one would markup radio buttons. I would attempt this sort of approach first, however, a simple unordered list might actually be what you are looking for, rather than a definition list, as with a definition list you need to specify a dt and a dd for each item.