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.
Related
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.
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.
When you touch an element, such as an edit box, in a web page on the iPad, it turns gray while you are touching it.
I have a table wrapped by a floating div. Instead of an individual data element or row going gray, the whole table (or its wrapping div) goes gray when a data element is touched. (The function of this table is an autocomplete pop-up)
Elsewhere in the site, I have a table in which only the touched data element goes gray.
I wondered if anyone could direct me to an explanation of the logic behind this graying on touch, so that we can code our table to give the desired behavior. Ideally, we'd like the row to highlight when it is touched.
In the alternative, if we could turn off this graying behaviour, that would be another option. We could then code the highlighting ourselves. Is there a way to turn off this behavior for particular html elements?
Thanks.
This author suggests a solution to remove the highlighting:
If for whatever reason you don't want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.
-webkit-tap-highlight-color: rgba(0,0,0,0);
It won't disable the highlighting, but it will make it invisible (an opacity of zero).
I have not tested this, however.
I have discovered something about the "logic" behind the graying behavior. It seems that elements that have handlers such as onclick, onmousedown etc. exhibit the behavior and those without such handlers don't. A (somewhat tedious) workaround for us is to change the code of the autocomplete so that each row has its own onmousedown etc. handler rather than the wrapping div taking care of this.
Try styling the wrapper div with select:none;
That should turn it off, and then you could code the highlight onfocus yourself.
Most browsers actually do this, but it's a bit more noticeable on the iPad and other Apple touch products. It's really for usability purposes, so I would only recommend disabling it if it is causing problems like the one you mentioned. It serves to help the user know what they are clicking, and gives them a chance to move their finger away if they are on the wrong thing.
I'm working on the my site which is done with a black background. I've changed the coloring on the form input fields. However, when I return to a page with saved text in a field, the background color becomes white, and the text color stays a light color (grey) and thus becomes somewhat unreadable.
e.g.
input{
background-color:black;
color:white;
}
Presumably there is some way to style this "text that is pre-populated by the browser based on previous responses", but I don't know what css allows access to it, or what it would be called to search for it.
Tried: Searching through the css pseudo-classes, google searching through form styling tutorials, etc. Browser inspecting the form elements for relevant user-agent css, nothing.
Point me in the right direction?
This is a browser behavior, and I don't believe it can be controlled via CSS.
The file input element is a bitch to customize. There are workarounds but they involve a lot of hackery. If you really need to customize the look and feel of your fields, try a flash based uploader like SWFUpload or Uploadify.
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.