I want the user to be able to select an image from a set of images. I want to do it in a way that is a) both part of a form element and b) works well for older browsers/browsers without javascript enabled.
I thought about overwriting the css to make a set of radio buttons display the images, but that looks like it's really hard to hide the bullet.
Another option was to overwrite the css in an option...select structure to display images, but that only worked on some browsers.
Is there any easy way to do this? Or should I create two options: one for browsers with Javascript and one for browsers without?
You could make the image part of a <label> for each radio button, and hide the radio button with visibility: hidden or something.
<label>
<img src="image1.png" alt="Some image" />
<input type="radio" name="image" value="1" />
</label>
… come to think of it, that’s pretty much the only way you can give a radio button an image, and it should work as expected. (Unless you were going to use background-image?)
Related
I have a checkbox, and then I have a <label> with a for attribute which is used to activate this checkbox. There is an <img> within this label. Usually, clicking the image changes the checkbox, but when text is selected elsewhere in the page it doesn't always work on the first click. Example:
Select this text! Then try to activate the checkbox by clicking the image while text is still selected:
<input id='check' type='checkbox'>
<label for='check'>
<img style='height: 75px' src='https://codepo8.github.io/canvas-images-and-pixels/img/horse.png'>
</label>
It works as expected in Firefox (only takes one click, and is reliable), so I'm inclined to believe this is a browser issue, but am not 100% sure. Is there anything else that could be causing this, and any possible way to work around it?
Something like this:
Where the user would click on any area of the button and it would select that radio button.
Any suggestions?
As far as I can tell, radio buttons as self closed, and can't wrap around other elements.
The best way is to just wrap the <input> in its <label>, as clicking a label also has the effect of focusing its associated input:
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript required: Demo: http://jsfiddle.net/GTGan/
If you need to style the label text separately, just wrap it in a <span>.
use Bootstrap, to create buttons around radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.
You can read a bit more detail and find an example here:
http://webaim.org/techniques/forms/screen_reader#labels
You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.
I saw some results via the related questions but didn't actually seem to show what I want.
Looking for a way to simply style the button in all major broswers easily.
<input type="file" name="file" id="file" size="29" class="formButton" />
<span class="smalltext">(.txt only)</span>
I want the browse button to use the CSS, I have seen some results that put a fake button on top of the real one, is that really the best approach to take?
Currently, there's no way to consistently style a file input field across browsers. You could use one of the various "tricks" out there (which as you mentioned simply overlay the button), but beware that you might interfere with keyboard access to the field.
Don't try this!
Even if you get it working, there's still browsers like Safari that use non-standard file selection widgets!
It's best to let the native file widget show through.
The best solution I've found is to either overlay your own as you've mentioned, or use something like Dojo, which effectively does the same thing. As far as I know, you can't style the file input button.
Actually, with JqueryUI you can do it by simply:
Javascript for rollover (not required):
$(".fg-button:not(.ui-state-disabled)")
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
)
Button Code:
<input type="submit" name="something" id="something" value="Submit" class="fg-button ui-state-default ui-corner-all">
Not that due to IE being a Microsoft product, the rounded corners gracefully degrade.
i have an input tag...
<input type="file" name="upload">
for browsing it makes the button vith value "browse"(in mozilla)
the question is: how can i change the name of that button? i want it to have the name "select" instead of "browse".
Thanks
Unfortunately the button text of an <input type="file"> is controlled by the browser, and cannot be changed, as far as I know.
In general, fancy file uploaders are often flash-based. However, if you are ready for a challenge, you may want to check out the following QuirksMode article for a few CSS + JavaScript tricks in this direction:
QuirksMode: Styling an input type="file"
I haven't tried, but can you set the input to display:none and then use background images?
I'm trying to make a system which asks users to specify what kind of content they are submitting, using PNG icons to represent each type. Ideally, what I'd like is a group of three buttons (with images on them) which behave like radio buttons - the user can use arrow keys to switch between them, they are treated as one group, etcetera. However, that appears to be impossible, and the closest I can get is putting the images alongside the pre-existing radio buttons. Is there a good way to 'fake' this functionality?
I would suggest using radio buttons as a user will recognise these inputs and it'll work without javascript.
<form>
<input type="radio" name="sex" value="male" id="male"/><label for="male">Male</label>
<br />
<input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label>
</form>
You can then put an image inside the labels, or better, a background image to supplement the text.
Sure, make two variants of each image (normal and highlighted) and use JavaScript to remember which one is selected and switch the images.
How about radio buttons next to the images. Then use JavaScript to hide the radio buttons and change the (hidden) selected radio when an image is clicked. Combine that with some sort of hightlighting effect on the selected image, and you have an attractive interface that degrades nicely. JQuery or a similar JavaScript library would be useful in achieving this.