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
Related
Autocomplete has been causing me trouble for quite some time. It overlays buttons and search results which causes users to click it instead of a link on the webpage.
I have been searching the internet for solutions to this for literally years. None of them are both practical and work consistently. I have tried all the alternatives to "off" listed throughout the relevant Google searches.
Below I have uploaded a GIF. The GIF shows me triggering autocomplete on an input which has autocomplete set to off.
I then remove the name attribute of a separate input within the form and suddenly autocomplete switches off.
I also demonstrate that having the keyword "Company" in the placeholder seems to override autocomplete=off. However, this does not seem to override autocomplete=off in all situations.
In the below example I used a datepicker, but I can also reproduced the problem with simple text inputs.
Is there a reason behind this strange behavior?
One solution is to use type="search", however, this may not be the desired approach for all developers.
Thanks in advance.
Have you tried this ?
<input name="unm" id="unm" type="text" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
Try using a form method.
<form method="post" action="">
<div>
<label for="cc">Please work:</label>
<input type="text" id="cc" name="cc" placeholder="Enter a company here" autocomplete="off">
</div>
If I have a HTML file with the tag <input type="text" size="3" …>it does what it should do, it renders an input element with the width of 3 characters. On the other hand, if I have the tag <input type="number" size="3" …> it renders the default width for an input field (much longer than 3 chartacters).
I know I can make a custom class with a .myclass { width: 75px; }, but I think it would be much easier to use the size attribute, specially if I know for a number field that the numbers accepted will be from 0 to 100, why to use a wider input field?
Is this done by design? Am I required to use CSS for this? If that so, how can I render an input field of exactly three characters wide according to the font family/size I'm using in the form?
Size is not an attribute for input type=number, it has min and max attribute to specify minimum and maximum number. To adjust width you will have to use width style.
I just tested the following:
<input type="number" size="20" min="1" max="5"/>
The size attribute didn't respond on Chrome or FireFox, but very surprisingly it did work on Internet Explorer 11.
My guess is it's still in the process of receiving global compatibility, and I would recommend creating a css class to handle the width as you so desire.
Here is a fiddle of the code for testing purposes.
<input type="number" min="1" max="5">
Is this what you are looking for? Other then that, I haven't found anything that would resize the input. I think the best thing to do is use css in your css file or add style="" to the input field.
This seems to work for me.
<input type="number" size="3" max=1 min=5>
Edit. Need to add min and max for size to work.
This is bugging me ... I have a simple HTML page that has a file typed input HTML object - see the line of code below:
<table>
<tr><td><input type="file" id="file" name="file" class="textbox" size="75" /></td></td>
</table>
In my CSS file I have:
input.textbox{padding:10px;font-size:14px}
The padding works fine in IE9 but does not appear to work in Mozilla. Are there any considerations that I need to take into account with Mozilla?
Any help would be greatly appreciated.
Thanks!
Set padding on the enclosing td element instead. File input widgets are implemented in special and varying ways in browsers, and they may be partly immune to CSS.
The best solution I've seen is here: http://www.quirksmode.org/dom/inputfile.html. Style for file inputs are notoriously inconsistent across browsers, so it requires a bit of hack-work on the HTML.
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?