Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.
Related
I am making a social networking site and would like emoticons to be available to users to click, and view a whole range of standard emoticons. I have seen around the web, and have not come up with any concrete information whether this can be done, and how.
The way I imagine the emoticons to be is similar to what WhatsApp have adopted. An emoticon icon, which, on click, displays a whole range of icons. Just wondering whether it is possible and if so, how?
It can be done, you would need a java-script widget for it though and depending on the rest of your framework it could be fully integrated or it would require some additional files.
Here is one example of such a widget, not sure if it is precisely what you need but you can get the idea there:
https://www.npmjs.com/package/emoticons-js
Umm, you can have a set of icons what you can display?
Or use the unicode entry points for the emojis?
http://apps.timwhitlock.info/emoji/tables/unicode
Then you need one element with some onclick handler in Javascript which opens up a floating div showing a selection of emojis.
Is it possible to make an element tabbable for screen readers only? I know that I can make an element non-tabbable for all devices (tabindex="-1"), but is there something like aria-tabindex? So I could do the following:
<input type="text" tabindex="-1" aria-tabindex="0" />
I need this because a client wants a fancy GUI for some normal HTML inputs, and so I'd like to make the inputs themselves non-tabbable (for visual users who can use the GUI), but make them tabbable for non-visual users (who then simply can act on the HTML inputs, and the GUI can be hidden with aria-hidden="true").
Update
I found a solution to my specific problem (provide a fancy GUI to visual keyboard and mouse users while not disturbing the experience of screen reader users) in this blog titled An accessible, keyboard friendly custom select menu:
The trick is that the native select element is placed above the fancy GUI (visually hidden using opacity: 0), which itself propagates the received clicks to a custom JS which manipulates the native select. This way the GUI doesn't need to be focusable, which solves my problem for this special case. Even text browsers will enjoy the full experience.
I don't know how far this trick can be extended to more complex fancy GUIs, but it's definitely a nice idea.
If you could do this, you would make the form unusable for sighted visitors who have mobility issues that prevent them from using a mouse. They rely on the keyboard in the same way that screen-reader software users do.
You could add keyboard support to the fancy GUI versions, with ARIA used to describe what each part does (ARIA can only describe things, it doesn't add or remove any functionality). I've also seen fancy inputs added as a progressive enhancement over the top of standard inputs, with the graphics just given an aria-hidden=true so they don't appear as duplicates to non-sighted users.
Edited to add: Filament Group has some styled form inputs in the accessible forms section of their code samples page. They're a good example of what I mean.
Is there a standard way to code HTML buttons? One way I've been doing some buttons for a long time is to turn links into block-style buttons. I found though, that when I need a submit button and a link-button to look the same, it is very difficult to style.
Also, if I want to follow a more RESTful design, I'll need to pass HTTP DELETE and things like that as well.
Is there a standard way to code all of these buttons and be able to style them all exactly the same way?
No, there isn't a standard way.
However, if you need a button, just use a button. I think you'll also find it easier to style.
I'm wondering if there are any good non-native form inputs for web development? I am currently using the built in <input> controls. They work just fine, but for my application they are too big (especially on OS X). I am wondering if there are any libraries that I can drop in as replacements.
I am especially interested in ones that:
Are a close to native control behavior as possible. Support for tabbing, highlighting current textbox, pressing up/down in <select>, etc.
Have something that replicates <select>
Look good and are compact
I am aware that you can use CSS for some styling, but it's pretty minimal and looks different depending on the browser.
Thanks for your help.
These two from Codrops give the native selects "display: none", then add an overlay that can be styled/modified.
Pretty simple, you just need to call the plugin on your select box.
Demos
http://tympanus.net/Development/SelectInspiration/index3.html
http://tympanus.net/Development/SimpleDropDownEffects/
HTML is not modular like that. Importantingly, you're also restricted by the browser support. The only ways to customize the look'n'feel of HTML are CSS and Javascript. There are crossbrowser CSS/JS based UI frameworks available like jQuery UI and several CSS based form solutions with the goal to have the same look'n'feel among the (most) browsers.
You can also consider to develop an Rich Internet Application (RIA) using one of Flex, Air, JavaFX, Silverlight, etc. This way it looks exactly the same in every webbrowser, but that requires at least an additional plugin which the client may have to install first.
http://plugins.jquery.com/project/jNice
http://www.whitespace-creative.com/jquery/jNice/
You may want to customize the images, sizes and CSS with your own.
You could try creating the controls with Flex/Flash and using JavaScript to retrieve the values.
This would allow you to customize the control as much as you wanted while still staying compatible with most users/browsers.
jQuery provides a browser neutral library for accessing and manipulating the DOM. This is good.
However I'm looking for a counterpart for the visual side of things - I need to build pixel measured interfaces, without wasting so much time testing and correcting cross browser issues (buttons having crazy margins in IE, or using the wrong box model in FireFox. The many IE and otherwise instances where putting several elements on one line screws up alignment or floats).
Basically I need to be able to plan out interfaces on paper with exact pixel dimensions (for example all textboxes should be exactly 22px high), and then easily translate those designs into Html. In a WinForms world, this is usually straight forward. With html it's anything but, and I find it's worst when it comes to input controls.
What libraries or collections could I use to make this sort of design a reality (outside of just converting everything into Silverlight where that degree of control exists). Javascript is required to be on (AJAX to begin with), so libraries can depend on it entirely for controls.
Some of the components I'm looking for in a uniform style with precise pixel control
Buttons
Textboxes
Dropdowns
ComboBoxes (Dropdown whose text can be edited directly)
Toggle Buttons
Alternatives include dojo (pure-JS) and GWT (JS generated from Java). Some may argue that ditching JS altogether and going with the Flash-backed Flex is a good option.
Also check out ExtJS. I've used this one extensively and I can vouch for how good it is. Originally it was a fork of the Yahoo UI Library (YUI), which Soviut mentioned. Personally, I think it's much better and more usable than the original YUI.
JQuery UI is a good extension of JQuery that allows for rich controls like dialogs, drag and droppables, etc.
The Yahoo Interface Library is another toolset you can use that may be closer to what you were originally asking for.