How can I remove classic circle of radio button and use instead a custom icon?
Is it possible?
Thanks
You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.
Related
i want to create a side bar using polymers paper tabs i want them stacked up and down not left to right. is this possible? if not is there another tab system i can use that can. I do not want to use links in my tabs.
AFAIK, material design doesn't have a design for this...which is why you don't see this option on paper-tabs.
It would be cool if paper-tabs easily supported a vertical property or allowed you to easily set the flex-direction of the tabs. However, that would require some work. If you'd like to see this added, I'd suggest filing a feature request (https://github.com/Polymer/paper-tabs/issues/new) and see what the designers think.
paper-menu could be a alternative if features like the underline transition aren't necessary?
I want to have a radio button input but instead of mere circles I would prefer another html element (including structure) to illustrate the choices. I thought this might work with the appearance style, but it does not work (probably because the input[radio] might not contain other elements.
Is there any way of styling an input radio, so it displays another HTMLElement instead of its circle?
Why not just leave them radio buttons but make the entire image clickable with label tags?
You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.
Some browsers allow you to override the settings, but you are going to have to do some super CSS tricks to get it to work.
http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/
is a good site that describes how to do what you are talking about. They use a sprite sheet and the browser specific -appearance style to change the look of the box dependent on state.
As you see, the whitebox are my often used usernames.
The autocompletion box has a white background. Is it possible to change it to whatever I want?
It is not possible to modify the browsers' native functionality.
One can't possibly style the autocomplete dropdown since it's not in the DOM.
I am on a mac running firefox. I have a website and the select dropdown box has a funny style:
When I look at other websites in the same browser they look different:
Or even at my code here: jsFiddle
What could possibly be causing my website to display how it is because as I understand it you have very little control over how select boxes are displayed?
Thanks
Are you using CSS to format <select>? Or a CSS reset?
If you use some rules like border or background, the default style disappears and you get this grey box..
You should remove those CSS settings.
The default dropdowns styling vary across browsers. Unfortunately there's no real CSS way to restyle them.
That said, you could use a jQuery plugin such as this: Custom Select Box which I've used in the past to good effect.
The second example is displayed using system presentation of select. The first one does not look like a system select because likely some custom styling applied which does not more than just resets the system presentation.
It is generally not possible to style HTML input fields other than text fields effectively. To do that developers usually re-implement input controls using complex HTML, this is suggested by Ian Devlin.
The discussion on this answer to the question "How can I use Google's new imageless button?" Has prompted this question.
Google seems to think that going imageless is good for some reason, but from the comments cited, I fail to see the advantage. Is it worth it to send dozens of lines of HTML and who knows how much CSS to render these imageless buttons, rather than simply load another image, especially when techniques like CSS sprites are available?
When would this technique be preferred? The other question asks how it can be done, but I want to know why it should be done.
Localization (it's easier to translate text than images)
Skinning/themeing (it's easier to change the look and feel with single CSS than recreate multiple images)
Accessibility (screen readers can read properly, text scaling works properly)
Performance (the CSS is shared and so is loaded once from the server)
Functionality (it's easier to expand the button with new UX elements like dropdown arrow when you don't have to change the whole picture)
Btw, the "imageless" button might as well contain an image inside the visual template. This approach is quite similar to XAML's approach to templating and styling the visual tree.
I think in this specific case I can only see the advantage that the buttons can be programatically generated. If you don't know what your button will say it's probably easy to make this way than generating it using somekind of image library generator.
Also changing one CSS can make you change the look-and-feel of all buttons at once. Using image buttons you'll need to update everyone and each of images.
Isn't this done because the height of the button may vary (for example the text size)?
The page load is smoother as no images have to be loaded and will appear later than the rest
The button text is also readable in the case somebody cannot read/view images, yet you have the graphical look. (building a graphical button with images in the traditional way around real text is as complicated HTML as this method)
As they mentioned in their blog, these buttons are skinnable without creating and storing custom images.
Basically, you get all the advantages of plain text buttons over custom imaging, while still having a nice, skinnable graphical look.