Can someone teach me or give me a link for my problem?
I wanted to customize my form "file" --> for uploading.
How can I customize it?
.classfile {
css codes....
}
<input type="file" name="name" class="classfile" />
If I do that way the text box and button of form will be affected. What is the other way to customize that?
You can't style a
<input type="file">
Just with CSS. Take a look here for a great trick : http://www.quirksmode.org/dom/inputfile.html
The short answer: You can't and you shouldn't. This is done purposely, to stop tricking people with this security/privacy critical element.
Related
Coding a simple radio button generates a blue button
<input type="radio" name="sample" />
<input type="radio" name="sample" />
See http://jsfiddle.net/XytJC/2/
How can I make these red?
Thanks
At the moment it's impossible to make it appear in the same way across the all available browsers because of not fully supported CSS3 and HTML5. So what I suggest you, is to use a plugin Uniform.js to get what you are looking for.
But if you are asking this question, I would mention also, that you will need to achieve this by using the css sprite method. Here on This website you will find the corresponding documention of "how to..."
Try using a span, as explained here.
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 can change the width of an upload field with the size attribute:
<input type="file" size="20">
But CSS's width, which works fine for regular input fields and other forms controls, seems to have no effect here, even on Firefox:
<input type="file" style="width: 20em">
Is there another way to accomplish this?
I'm not sure if this will help but this article seems to go quite in-depth into various ways of styling a file-input:
http://www.quirksmode.org/dom/inputfile.html
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.